It’s not easy to have a simple and elegant design, when you must present a large amount of content on a single web page. jQuery Expandable tree view menus and navigation systems, can be a great choice to solve this problem, as it saves a lot of space and adds a stylish look to any web page.  Here is a jQuery dynamic treeview example This can be accomplished using jQuery plugins and there is a long list of  popular tree view plugins, which can be easily integrated into any website. However, some jQuery plugin have very complex code and are very difficult to customize. So in this article, we will show you how to create a hand coded jQuery plugin, it’s very basic, but it’s a good start, upon which you can build.

jquery dynamic treeview example

Here we have a set of unordered HTML nested elements and we turn it into expandable tree view structure with CSS and jQuery.

<div class="tree">
<button id="all">Toggle All< /button>
<ul>
<li><a>First Level< /a>
<ul>
<li><a>Second Level< /a>< /li>
<li><a>Second Level< /a>< /li>
<li><a>Second Level< /a>< /li>
< /ul>
< /li>
<li><a>First Level< /a>
<ul>
<li><a>Second Level< /a>
<ul>
<li><a>Third Level< /a>< /li>
<li><a>Third Level< /a>< /li>
<li><a>Third Level< /a>
<ul>
<li><a>Fourth Level< /a>< /li>
<li><a>Fourth Level< /a>< /li>
<li><a>Fourth Level< /a>
<ul>
<li><a>Fifth Level< /a>< /li>
<li><a>Fifth Level< /a>< /li>
<li><a>Fifth Level< /a>< /li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Second Level< /a>< /li>
</ul>
</li>
<li><a>First Level< /a>
<ul>
<li><a>Second Level< /a>< /li>
<li><a>Second Level< /a>< /li>
</ul>
</li>
</ul>
</div>

The above is a nested html list, where each level will be a node of the expandable tree view that’s handled with CSS and jQuery. Below is the complete jQuery code, which converts unordered nested HTML elements, into an ordered, expandable, tree structure.

$( document ).ready( function( ) {
    $( '.tree li' ).each( function() {
        if( $( this ).children( 'ul' ).length > 0 ) {
            $( this ).addClass( 'parent' );     
        }
    });

    $( '.tree li.parent > a' ).click( function( ) {
        $( this ).parent().toggleClass( 'active' );
        $( this ).parent().children( 'ul' ).slideToggle( 'fast' );
    });

    $( '#all' ).click( function() {

        $( '.tree li' ).each( function() {
            $( this ).toggleClass( 'active' );
            $( this ).children( 'ul' ).slideToggle( 'fast' );
        });
    });

});

This is a simple example of a jQuery tree view. You can download it from with the link above, which includes CSS with the downloaded zip file. It has very simple customizable jQuery and CSS/HTML code and can be integrated easily into any web page for managing large amounts of content, such as a site map or menu system.

email