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>

3 comments:

  1. nice
    this is cool..
    what could i do to have the tree stay open after i click on a link in a sub tree, because it closes it

    ReplyDelete
  2. I'm actually not sure why it does that. I did try to fix it but got nowhere. Sorry.

    ReplyDelete