Question

I have a ul nav. I need to show div content when the “Resources” li is clicked and make “Resources” li active. Then when the div content is clicked to close, hide div content and make li not active. I’m not sure how to go about doing this so any insight would help.

Click this li item, make active:

<li><a href="">Resources</a></li>

Show this div content

<div id="pdftab">Some content</div>

Thanks so much

Answer 1

Without having knowledge of your page markup I can just give you a hint. Something like this would work for you.

$('li a').click(function(){
   $('#pdftab').show();
   $(this).parent().addClass('active');
   return false;
});

$('#pdftab').click(function(){
   $(this).hide();
   $('li').removeClass('active');
});

Define the active class styles

.active{
   //add required styles
}

You can use addClass/removeClass to add/remove classes from dom elements. Calling .parent() on a jQuery object gets the parent element.

Update:

Based on your markup from

$('#navlist li:eq(1) a').click(function(){
   $('#pdftab').show()
               .animate({left: '+=340px'}, 1200);
   $(this).parent().addClass('resourceactive');
   return false;
});

$('#pdftab').click(function(){
   $(this).hide();
   $('#navlist li:eq(1)').removeClass('resourceactive');
});