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>
thanks for posting!
ReplyDeletenice
ReplyDeletethis 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
I'm actually not sure why it does that. I did try to fix it but got nowhere. Sorry.
ReplyDelete