Question

I followed this tutorial on making an expanding side navigation with jQuery in Magento:

http://benfrain.com/notepad/2011/05/magento-add-an-expanding-accordion-style-vertical-side-menu.html

I’ve got it working, but I’m trying to figure out how to make the 2nd level links be expandable like the 1st level.

This is the section in the jquery.menubf.js file that prevents the first level links from being followed:

jQuery('ul#vertnav > li').click(function(event) {
    event.preventDefault();
});

jQuery('ul#vertnav > li, ul#vertnav > li > ul > li').click(function(){
    var selfClick = jQuery(this).find('ul:first').is(':visible');
    if(!selfClick) {
        jQuery(this)
        .parent()
        .find('> li ul:visible')
        .slideToggle();

    }

    jQuery(this)
        .find('ul:first')
        .stop(true, true)
        .slideToggle(); 
});

The author is no longer supporting this guide, and I’m pretty lost at how to modify this script. Any jQuery rockstars care to point me in the right direction?

EDIT: This is what the output looks like:

<div class="vertnav-container">
<div class="">
<h4 class="no-display">Category Navigation:</h4>
<ul id="vertnav">
<li class="first level0-active level0 active products open">
<span class="vertnav-cat"><a href="http://dev.site.com/products.html"><span>Products</span></a></span>
<ul>
<li class="first level1-inactive level1 inactive sitetion">
<span class="vertnav-cat"><a href="http://dev.site.com/products/sitetion.html"><span>sitetion</span></a></span>

</li>
<li class="level1-inactive level1 inactive ultrasonics">
<span class="vertnav-cat"><a href="http://dev.site.com/products/ultrasonics.html"><span>Ultrasonics</span></a></span>

</li>
<li class="level1-inactive level1 inactive surgery">
<span class="vertnav-cat"><a href="http://dev.site.com/products/surgery.html"><span>Surgery</span></a></span>

</li>
<li class="level1-inactive level1 inactive irrigation">
<span class="vertnav-cat"><a href="http://dev.site.com/products/irrigation.html"><span>Irrigation</span></a></span>

</li>
<li class="last level1-inactive level1 inactive diagnostics">
<span class="vertnav-cat"><a href="http://dev.site.com/products/diagnostics.html"><span>Diagnostics</span></a></span>

</li>

</ul>
</li>
<li class="next level0-inactive level0 inactive contact-us">
<span class="vertnav-cat"><a href="http://dev.site.com/contact-us.html"><span>Contact Us</span></a></span>

</li>
<li class="last level0-inactive level0 inactive about-us">
<span class="vertnav-cat"><a href="http://dev.site.com/about-us.html"><span>About Us</span></a></span>

</li>
</ul>
</div>
</div>
<div class="left-widget student-widget">
<h1>
Are you a registered Endodontic resident? <a href="http://dev.site.com/customer/account/create/?student=1" title="Create an Student Account">Sign up</a> to receive our university pricing.
</h1>
</div>
</div> 

    <div class="col-main">

                                <div class="std"><div class="home-content" style="display: none;">

<ul class="home-featured">

<li> <a href="http://dev.site.com/products.html/"><img src="http://dev.site.com/skin/frontend/default/orbtura/images/home/list1.jpg" alt="E-store specials" /></a> <a class="button blue-button" href="http://dev.site.com/products.html/">E-store specials</a> </li>

<li> <a href="http://dev.site.com/products/featured-products.html/"><img src="http://dev.site.com/skin/frontend/default/orbtura/images/home/list2.jpg" alt="Featured products" /></a> <a class="button blue-button" href="http://dev.site.com/products/featured-products.html/">Featured products</a> </li>

<li> <a href="http://dev.site.com/endoeducation/videos.html/"><img src="http://dev.site.com/skin/frontend/default/orbtura/images/home/list3.jpg" alt="Featured video" /></a> <a class="button blue-button" href="http://dev.site.com/endoeducation/videos.html/">Featured video</a> </li>

</ul>

</div></div><div style="margin-top: 30px"class="category-grid">
<ul>

<li>
<a class="image" href="http://dev.site.com/products/sitetion.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/sitetion_button_1.jpg" alt="sitetion"/>
</a>
<a class="button" href="http://dev.site.com/products/sitetion.html">sitetion</a>
</li>

<li>
<a class="image" href="http://dev.site.com/products/ultrasonics.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/ultrasonic_button_1.jpg" alt="Ultrasonics"/>
</a>
<a class="button" href="http://dev.site.com/products/ultrasonics.html">Ultrasonics</a>
</li>

<li>
<a class="image" href="http://dev.site.com/products/surgery.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/microsurgery_button_1.jpg" alt="Surgery"/>
</a>
<a class="button" href="http://dev.site.com/products/surgery.html">Surgery</a>
</li>

<li>
<a class="image" href="http://dev.site.com/products/irrigation.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/Irrigation_button.jpg" alt="Irrigation"/>
</a>
<a class="button" href="http://dev.site.com/products/irrigation.html">Irrigation</a>
</li>

<li>
<a class="image" href="http://dev.site.com/products/diagnostics.html">
    <img class="css3-border"  src="http://dev.site.com/media/catalog/category/cache/1/thumbnail/190x170/9df78eab33525d08d6e5fb8d27136e95/diagnostics_button_3.jpg" alt="Diagnostics"/>
</a>
<a class="button" href="http://dev.site.com/products/diagnostics.html">Diagnostics</a>
</li>
</ul>
</div>

<script type="text/javascript">
//<![CDATA[

jQuery(window).load(function(){
AutoHeigthLine(3,".category-grid li");
AutoHeigthLine(3,".category-grid a.button");
});

//]]>
</script>

Answer 1

All I did was change the first click event handler to stop the propagation of click events, so the <li> element that is actually clicked will be the only one to receive the click event and I added a nested <ul> element as a third tier.

JS —

jQuery('#vertnav li').click(function() {
    return false;
});

jQuery('#vertnav > li, #vertnav > li > ul > li').click(function(){
    if(!jQuery(this).find('ul').eq(0).is(':visible')) {
        jQuery(this)
        .siblings().find('ul:visible')
        .slideToggle();

    }

    jQuery(this)
        .find('ul').eq(0)
        .stop(true, true)
        .slideToggle(); 
});

Notice I removed the tagNames from selectors wherever possible and instead of using the :first pseudo-selector I used .eq(0) to get the first result. I also changed the .parent().find('> li') selector to .siblings() since selecting a parent then child is the same as selecting a sibling. These will all make the code perform faster.

HTML —

<ul id="vertnav">
    <li class="first level0-active level0 active products open">
        <span class="vertnav-cat"><a href="http://dev.site.com/products.html"><span>Products</span></a></span>
        <ul>
            <li class="first level1-inactive level1 inactive sitetion">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/sitetion.html"><span>sitetion</span></a></span>
                <ul>
                    <li>Third Tier</li>
                </ul>
            </li>
            <li class="level1-inactive level1 inactive ultrasonics">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/ultrasonics.html"><span>Ultrasonics</span></a></span>
            </li>
            <li class="level1-inactive level1 inactive surgery">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/surgery.html"><span>Surgery</span></a></span>
            </li>
            <li class="level1-inactive level1 inactive irrigation">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/irrigation.html"><span>Irrigation</span></a></span>
            </li>
            <li class="last level1-inactive level1 inactive diagnostics">
                <span class="vertnav-cat"><a href="http://dev.site.com/products/diagnostics.html"><span>Diagnostics</span></a></span>
            </li>
        </ul>
    </li>
    <li class="next level0-inactive level0 inactive contact-us">
        <span class="vertnav-cat"><a href="http://dev.site.com/contact-us.html"><span>Contact Us</span></a></span>
    </li>
    <li class="last level0-inactive level0 inactive about-us">
        <span class="vertnav-cat"><a href="http://dev.site.com/about-us.html"><span>About Us</span></a></span>
    </li>
</ul>

Here is a demo: http://jsfiddle.net/8EvRB/2/