Jquery toggle() is not working for grandchildren
<p>I am trying to develop a webpart which shows pages in parent-child-grandchild relation. Iam trying expand and collapse the children to show the grand children, but my code is trying to collapse parent when i try to expand child node. Iam posting my jquery and css files please help me if i am doing something wrong. </p>

<p>[updated]</p>

<p>I have changed my code to something like this...But now the problem is when you expand the list the image is not changing to 
[-].</p>

<p>Thanks.</p>

<p>Jquery code:</p>

<pre><code>&lt;script&gt;
function handleClick(ev) {
ev = ev || window.event;
if(ev.preventDefault) {
ev.preventDefault();
} else if('cancelBubble' in ev) {
ev.cancelBubble = true;
}
}
&lt;/script&gt;

&lt;DIV id="divNav"&gt;
 &lt;DIV id="divNavHeader"&gt;&lt;/DIV&gt;
 &lt;UL&gt;
  &lt;LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('parentHover');}, function() { $(this).removeClass('parentHover');});" onclick="javascript: $(this).children().toggle();" id="liCurrentParentChild"&gt;&lt;span class="plus"&gt;Parent1[+]&lt;/span&gt;&lt;span class="minus"&gt;Parent1[&amp;#8211]&lt;/span&gt;
   &lt;ul id="childCurrentList"&gt;
    &lt;LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('childHover');}, function() { $(this).removeClass('childHover');});" id="liCurrentChild"&gt;&lt;a href="Parent1.aspx"&gt;Parent1&lt;/a&gt;&lt;/LI&gt;
    &lt;LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('childHover');}, function() { $(this).removeClass('childHover');});" onclick="javascript: $(this).children('ul').toggle(); debugger; handleClick(event);" id="liCurrentParentGrandChild"&gt;&lt;span class="plus"&gt;Parent1child1[+]&lt;/span&gt;&lt;span class="minus"&gt;Parent1child1[&amp;#8211]&lt;/span&gt;
     &lt;ul id="GrandChildrenList"&gt;
      &lt;LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('grandchildHover');}, function() { $(this).removeClass('grandchildHover');});" id="liCurrentgrandChild &gt;&lt;a href="Parent1child1.aspx"&gt;Parent1child1&lt;/a&gt;&lt;/LI&gt;
      &lt;LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('grandchildHover');}, function() { $(this).removeClass('grandchildHover');});" &gt;&lt;a href="Parent1grandchild1.aspx"&gt;Parent1grandchild1&lt;/a&gt;&lt;/LI&gt;
     &lt;/ul&gt;
    &lt;/LI&gt;
   &lt;/ul&gt;
  &lt;/LI&gt;
  &lt;LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('parentHover');}, function() { $(this).removeClass('parentHover');});" &gt;&lt;a href="Parent2.aspx"&gt;Parent2&lt;/a&gt;&lt;/LI&gt;

 &lt;/UL&gt;
&lt;/DIV&gt;
</code></pre>

<p>css:</p>

<pre><code>&lt;style&gt;
#childList { display: none; }
#GrandChildrenList { display: none; }

 .parentHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .childHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .grandchildHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .parentchildHover, #hover-demo1 p:hover 
 { 
  background:  #FFFFFF;
 }

 .minus { display: none; }

 .plus { display: inline; }

 .plus{ 
  color: #001A49; 
  padding: 3px 0px 3px 0px; 
  margin: 0 0 5px 0; 
  }

 .minus { 
  color: #001A49; 
  padding: 3px 0px 0px 0px; 
  margin: 0 0 0px 0; 
  }



#divNavHeader
{
  margin: 2px 0px 0 0px;
  padding: 5px 0px 5px 10px;
  background:#001A49;
  color: #FFFFFF;
  font-weight:600;
  width:260px;
}
#divNav
{
  margin: 2px 10px 0 0px;
  padding:0 0 0 0px;
  border:solid 1px #33333;
}

#divNav ul
{
 margin: -1px 0 0px 0px;
 padding:0px 0 0px 0px;
 cursor:pointer;
}

#divNav li
{    
 margin: 0px 4px 0px 4px;
 padding:3px 0 3px 10px;
 list-style-type: none; 
 border-top:solid 1px #333333;
} 

#divNav li ul /*{display: none;} */
{
 margin-top:3px;

} 

#liCurrent 
{
 background: #CBCCC0;
 color:#FFFFFF;
}

#liParentChild
{
 background: #ffffff;
 color:#001A49;
}

#liGrandChild
{
 background: #ffffff;
 color:#001A49;
}


#liParentChild .minus
{
 background: #ffffff;
 color:#001A49;
}

#liGrandChild .minus
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentParentChild
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentGrandChild
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentgrandChild
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentChild .plus
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentGrandChild .plus
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentChild
{
 background:#CBCCC0;
 color:#FFFFFF; 
}

#liCurrentgrandChild
{
 background:#CBCCC0;
 color:#FFFFFF; 
} 
#liCurrentgrandChild .minus
{
 background:#CBCCC0;
 color:#FFFFFF; 
} 
#liCurrentChild .minus
{
 background:#CBCCC0;
 color:#FFFFFF; 
}

/*


#divNav ul li:hover ,
#divNav ul li a:hover {                           
 display:block;
 position:relative;
 margin:0;
 top:15px;              
 left:30px;       
 height:auto;      
 width:13.5em;
 color:black;                        
 background:#999999        
}

#divNav  ul.li:hover ,
#divNav  ul.li a:hover  {    
 left:auto;
 right:0;         
}

* html #divNav  ul.li a:hover {         
 right:-1px;
}

#divNav li ul {display: none;} 
#divNav  li:hover &gt; ul {display: block;} 
*/
&lt;/style&gt;


&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
</code></pre>
