CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Some Dinosaur
Some Dinosaur

Reputation: 164

Change css with OnClick

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?

Upvotes: 0

Views: 2903

Answers (5)

Mikeys4u
Mikeys4u

Reputation: 1552

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

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

Upvotes: 0

eepp
eepp

Reputation: 7585

Seems like you want to hide #about:

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

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

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41842

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

Upvotes: 0

Zero Fiber
Zero Fiber

Reputation: 4465

You can change the css using jquery.

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

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

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>

Upvotes: 2

Related Questions