Change css with OnClick

Question

Is it possible to switch the display:block part of #about{ with display:none part of #downloads with a OnClick?

#about {
    position:relative;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:800px;
    height:450px;
    margin-left:50px;
    margin-right:50px;
    border:solid 2px #000000;
    background-color:#448efc;
    margin-bottom:5px;
    display:block
}
#downloads {
    position:relative;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:800px;
    height:450px;
    margin-left:50px;
    margin-right:50px;
    border:solid 2px #000000;
    background-color:#448efc;
    margin-bottom:5px;
    display:none
}

heres my OnClick Code<a href="#downloads" onclick="somthing?"> im not sure if its possible do any of you know how?

Why do you want to change the css rule, instead change the class or just use jquery .show(), .hide() — PSL
– PSL, Commented Jun 16, 2013 at 3:24

Zero Fiber · Accepted Answer · 2013-06-16 03:26:28Z

3

You can change the css using jquery.

<a href="#downloads" onclick="$('#about').css("display", "none");">

answered Jun 16, 2013 at 3:26

Zero Fiber

4,4752 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niet the Dark Absol · Accepted Answer · 2013-06-16 03:26:27Z

2

I would suggest something like this:

#about, #downloads {
    /* all of the CSS rules EXCEPT display here */
}
.hidden {display:none}

Then your HTML should be:

<div id="about">...</div>
<div id="downlaods" class="hidden">...</div>

Now your link can be:

<a href="#downloads" onClick="document.getElementById('about').className = 'hidden';
    document.getElementById('downloads').className = '';">Downloads</a>

answered Jun 16, 2013 at 3:26

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

Mr_Green · Accepted Answer · 2013-06-16 04:06:26Z

0

It seems you are actually looking for jQuery toggle(). because it makes no sense keeping onclick event on the element which has already display: none.

<div id="about" onclick="$('#downloads').toggle()"></div>
<div id="downloads" onclick="$('#about').toggle()"></div>

Working Fiddle

edited Jun 16, 2013 at 4:06

answered Jun 16, 2013 at 3:43

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Comments

eepp · Accepted Answer · 2013-06-16 04:42:12Z

0

Seems like you want to hide #about:

$('#downloads').click(function() {
    $('#about').hide();
});

With this, there's no need to add onclick attributes.

answered Jun 16, 2013 at 4:42

eepp

7,6551 gold badge42 silver badges58 bronze badges

Comments

Mikeys4u · Accepted Answer · 2015-09-05 00:23:45Z

0

I had to change my quotesmarks, code below fully works for me....

<form action="uploadprofileaccept.php" 
class="dropzone" onclick="$('#imageform').css('display', 'none');">
</form>

answered Sep 5, 2015 at 0:23

Mikeys4u

1,56219 silver badges27 bronze badges

Collectives™ on Stack Overflow

Change css with OnClick

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related