CODEWITHSUNDEEP
jqueryaddclass
Ryan
Ryan

Reputation: 14649

Jquery Add/remove Class of seperate div on click

 #bottomToolbar #facet-container #tb-facets .info-toolbar #rv-active {
position:relative;
 }

 .tb-1-5 {
display:none;
}


 <div id="bottomToolbar">
    <div id="facet-container">
<ul id="tb-facets">
    <li class="info-toolbar">
    <a id="info-tb-1">Recently Viewed</a>
    <div id="rv-active" class="tb-1-5">Hello World</div></li>
    <li class="info-toolbar">Favorites</li>
    <li class="info-toolbar">Wish List</li>
</ul>
</div>
   </div>


$('#info-tb-1').bind('click', function() {
        $('#rv-active').removeClass('tb-1-5');
    });

What I'm trying to do is show a div when I click on an "a" element. I need to change it to remove the display: none;

Thanks

Upvotes: 0

Views: 2226

Answers (5)

James Allardice
James Allardice

Reputation: 165951

The code you have posted should work (although many people have already noted, it would be easier to use jQuery's show function rather than removing the class).

However, I think your problem lies in the fact that your code is running before the document is fully loaded, and therefore the elements referenced do not exist.

Try this instead:

$(document).ready(function() {
    $('#info-tb-1').bind('click', function() {
        $('#rv-active').show();
    });
});

Upvotes: 1

Purag
Purag

Reputation: 17061

You could've used document.getElementById('rv-active').style.display="block"; or $('#rv-active').css("display","block"); and instead styled #rv-active directly instead of with all those other divs like this:

#bottomToolbar #facet-container #tb-facets .info-toolbar {
  position:relative;
}

 #rv-active {
  position:relative;
  display:none;
}

getElementById might not be an ideal tool, but it's useful, especially for things like this.

More about getElementById here, and more about the .css() method here.

Upvotes: 1

Jim Schubert
Jim Schubert

Reputation: 20357

You can use $(elem).hide() and $(elem).show() to add/remove "display:none;"

There is also a .toggle() function with an example of what you're trying to do: http://api.jquery.com/toggle/

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

If you want to display something use show();

$('#info-tb-1').bind('click', function() {
        $('#rv-active').removeClass('tb-1-5').show();
    });

if something is hidden with display:none, using show() display the hidden element

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359776

Have you tried using .show()?

$('#info-tb-1').click(function()
{
    $('#rv-active').show();
});

Learn to dig through the jQuery API docs. They will answer 99% of your questions.

Upvotes: 2

Related Questions