show hide - Having issues with multiple hidden/revealed DIVs using JQuery -

i creating page website there vertical navigation bar, , upon clicking on menu items/submenu items on said navigation bar, different divs hidden/revealed, showing , hiding different products.

so far, have gotten showing/hiding of main menu items work upon clicking them.

example: click on "first item" link @ top of menu, , grid of first item images show next navigation bar. click on "second menu item", , first images vanish, , second item images appear, etc.

however, have run trouble is, reason, when click on 1 of submenu items, images show up, can't corresponding main menu item's images disappear.

here's code main menu/sub menu issue:

html

<ul class="accordion">     <li class="item1">         <a href="#">product category 1</a>         <ul>             <li class="sub1"><a href="#">sub 1 </a></li>         </ul>     </li> </ul>  <!---hidden divs--->  <div id='hidden_div' >     <img src="images/item1.png"/> </div> <div id='hidden_div2' >     <img src="images/item1.png"/> </div> 

jquery showing , hiding

$(document).ready(function()  {     $('.item1').click(function()      {         $('#hidden_div').show();         $('#hidden_div2').hide();     });      $('.sub1').click(function()      {         $('#hidden_div2').show();         $('#hidden_div').hide();     }); }); 

i'm not sure if navigation bar javascript problem, javascript file connected page minimized...say word , can post code. don't know, i'm lost.

your problem here .sub1 inside .item1, when click on .sub1 click on .item1.

that called event bubbling. stop that, use stoppropagation on .sub1 click :

$('.sub1').click(function(e) {     e.stoppropagation();     $('#hidden_div2').show();     $('#hidden_div').hide(); }); 

if dont want use stoppropagation change selector $('.item1>a) , $('.sub1>a').