Here is a snippet of jQuery code that I am working with:
$(document).ready(function(){
$("#accordion2 h3").click(function(){
//slide up all the link lists
$("#accordion2 ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
Below is the corresponding HTML structure:
<div id="accordion2">
<ul>
<li>
<h3>Articles</h3>
<ul>
<li><a href="#">Nature</a>
<ul>
<li>Wild life</li>
<li>Flowers</li>
<li>Animals</li>
</ul>
</li>
<li><a href="#">Earth</a></li>
<li><a href="#">Space</a></li>
<li><a href="#">Ocean</a></li>
<li><a href="#">Land</a></li>
</ul>
</li>
</ul>
</div>
I am looking to modify the jQuery code so that the user can slide down the "Nature" section and view its contents, which includes a third level menu.