Showing posts with label menu. Show all posts
Showing posts with label menu. Show all posts

Friday, 4 November 2011

Quick JQuery expanding vertical menu

I'm just posting this as a reference for myself primarily, but if it helps anyone else then that's great. This is a super quick expanding vertical menu. You can animate it by passing 'slow' or 'fast' as an argument to the toggle() method.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.branch').click(function(){
        $(this).children('.subbranch').each(function(){
            return $(this).toggle();
        });
    });
});
</script>


<ul class='tree'>
<li class='branch'><a href='#'>Super Title 1</a>
<ul class='subbranch' style='display:none'>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul></li>
<li class='branch'><a href='#'>Super Title 2</a>
<ul class='subbranch' style='display:none'>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
</ul></li>
</ul>