Click to remotely hide/show an object [solved]
Basically, I have a list of items where I would like to click on an item and (1) have it display a child <div> tag while (2) hiding all the <div> tags associated with the other <li>. I figured the easiest way to do this would be to hide all the <div>s through CSS then picking out the <li> that got clicked and turning its <div> back on. It's this second part I can't figure out.
The full page is at
http://www.thefineline.org/jQuery/switcher.html but here is the relevant javascript code:
-
$().ready(function(event){
$('#menu li').click(function(){
$('#menu div').addClass('hidden');
});
$(this).click(function(){
$(this).removeClass('hidden');
});
I've tried half a dozen ideas on getting that second click function to show the appropriate <div> and they either do nothing or throw an error such as "X" is null or not an object or .className is not a function or method. I've tried using toggle(), I've tried some DOM tree manipulation, I've tried some ideas with event bubbling ... nothing has worked. Maybe someone else can see what I'm missing here....