I am relatively new to jQuery and this is one of the first attempts to use it. Tell me if I am using it wrong:This is the main code that toggles everything:$(function(){    $(#tree li).hide();//collapse everything by default    $(#tree span).click(function(){        $(this).toggleClass(uncollapsed);//toggle V and >        $(this).parent().find(>li).toggle(fast);//display and hide    });});I am only interested to get reviews on the JS above, however, I will post the the HTML and CSS to give some background.HTML:<ul id=tree>    <span>(click to toggle)</span>    <li>1</li>    <li>2</li>    <li>        <ul>            <span>(click to toggle)</span>            <li>3</li>        </ul>    </li></ul>CSS:#tree ul,#tree li,#tree span{    list-style:none;    padding:0;    margin:0;}#tree li,#tree span{    padding:5px 0 5px 20px;}#tree span{    cursor:pointer;    background:url('collapsed.png') no-repeat 0 50%;}#tree span.uncollapsed{    background-image:url('uncollapsed.png');}
Collapsable Tree
javascript;jquery
That is not valid html.The only thing you can put inside a <ul> tag is <li> tags.With that in mind, this would be much better (change the selector as necessary):$(#tree span).click(function () {    $(this).toggleClass(uncollapsed).next().toggle(fast);});Otherwise, you should change the click method to:$(#tree span).click(function () {    $(this).toggleClass(uncollapsed).parent().children(li).toggle(fast);});Reasons:you don't need to use $() over again to recreate $(this).find(>li) is a less efficient version of .children(li)Better yet, if you can change the html to:<span class='hasChildren'>    (click to toggle)    <ul id=tree>        <li>1</li>        <li>2</li>        <li class='hasChildren'>            (click to toggle)            <ul>                <li>3</li>            </ul>        </li>    </ul></span>Then the click event to:$(.hasChildren).click(function (e) {    $(this).toggleClass(collapsed);    return false;});And in css, style accordingly (you could even animate the class if you wished). Note however that this would be a change in the way the list worked (play around with <a> tags in the list and clicking in different parts to see the difference).