SO - 22521016

by Arun P Johny

HTML

<div class="nav-sidebar">
    <ul role="menu">
        <li role="menuitem">
            <a href="#" class="clearfix">Top Level</a>
        </li>
        <li class="slidedown open" role="menuitem">
            <a href="#" class="clearfix">Top Level</a>
            <span class="slidedown-toggle">Show Sub Menu</span>
            <ul class="list-reset nav-sub" role="menu">
                <li role="menuitem">
                    <a href="#">Second Level</a>
                </li>
                <li role="menuitem">
                    <a href="#">Second Level</a>
                </li>
                <li role="menuitem">
                    <a href="#">Second Level</a>
                </li>
            </ul>
        </li>	
        <li class="slidedown" role="menuitem">
            <a href="#" class="clearfix">Top Level</a>
            <span class="slidedown-toggle">Show Sub Menu</span>
            <ul class="list-reset nav-sub" role="menu">
                <li role="menuitem">
                    <a href="#">Second Level</a>
                </li>
                <li role="menuitem">
                    <a href="#">Second Level</a>
                </li>
                <li role="menuitem">
                    <a href="#">Second Level</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.nav-sub {
    height: 0;
    overflow: hidden;
    transition: height 250ms ease;
}
.slidedown.open .nav-sub {
    height: auto;
}
ul {
    margin: 0;
    margin: 0;
}

JavaScript

$(document).ready(function () {

    var $slidedownToggle = $('.nav-sidebar .slidedown-toggle');

    $('.nav-sidebar .slidedown.open .nav-sub').height(function(){
        return $(this).height();
    })
    
    $slidedownToggle.click(function () {

        var $slidedown = $(this).parent('.slidedown'); // Get the container item
        var $subnav = $(this).siblings('.nav-sub'); // Get the ul that needs to slide up/down

        var totalHeight = 0; // Calculate the height required (in px) to show all <li>'s
        $subnav.find('li').each(function () {
            totalHeight += $(this).outerHeight(true);
        });

        // Toggle 'open' class on the parent <li>
        $slidedown.toggleClass('open');

        // Set the appropriate height
        if ($slidedown.hasClass('open')) {
            $subnav.css({
                height: totalHeight + 'px'
            });
        } else {
            $subnav.css({
                height: '0px'
            });
        }

    });

});