How to create jQuery Treeview with minimum code

How to create jQuery Treeview with minimum code

How to create jQuery Treeview with minimum code

The jQuery Treeview can be created easily with just a few lines of code. In this tutorial I will create a treeview in HTML’s ul and li tags.

Treeview HTML Code

In this treeview I will show the relationship between Continents, Countries, States & Cities.

This treeview will look like:

treeview

The 2 topmost nodes of the treeview will be the continents – here – North America & Asia.

<ul id="treeview">
    <li>North America</li>
    <li>Asia</li>
</ul>

Then inside North America there will be USA and Brazil.

Similarly inside Asia there will be China and India.

<ul id="treeview">
    <li class="parent">North America
        <ul>
            <li>
                USA        
            </li>
            <li>Brazil</li>
        </ul>
    </li>
    <li class="parent">Asia
        <ul>
            <li>
                USA        
            </li>
            <li>Brazil</li>
        </ul>
    </li>
</ul>

You can see that I am adding the country nodes inside the continent li tags, and at the same time adding class=”parent” to the li signifying that it is a parent node and so contains children.

In the same way add states and cities to the country li tags.

That will make our full treeview code to look like:

<ul id="treeview">
    <li class="parent">
        North America
        <ul>
            <li class="parent">
                USA
                <ul>
                    <li>Alabama</li>
                    <li class="parent">
                        New York
                        <ul>
                            <li>NYC</li>
                            <li>New Jersey</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Brazil</li>
        </ul>
    </li>
    <li class="parent">
        Asia
        <ul>
            <li class="parent">
                China
                <ul>
                    <li class="parent">
                        Guangdong
                        <ul>
                            <li>Shantou</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="parent">
                India
                <ul>
                    <li class="parent">
                        Uttar Pradesh
                        <ul>
                            <li>Lucknow</li>
                            <li>Kanpur</li>
                        </ul>
                    </li>
                    <li class="parent">
                        Gujarat
                        <ul>
                            <li>Surat</li>
                            <li>Ahmedabad</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Treeview CSS

#treeview, #treeview ul {
    list-style: none;
}

    #treeview .parent {
        position: relative;
        cursor: pointer; 
    }

        #treeview .parent:before {
            padding-left: 25px;
            background: url(Image/plus-minus.png) no-repeat;
            background-position: -25px top;
            content: "";
            height: 25px;
        }

    #treeview .close:before {
        background-position: 0 top;
    }

    #treeview .parent > ul {
        display: none;
    }

The css will give the styling to the treeview. It will initially hide the child nodes – country, state & city.

It also shows the + sign (which is a picture), before the element, that has the parent class.

There will also be a sign shown whenever a parent node is collapsed.

The close class will be applied through the jQuery code on the click of the parent node. This class change the sign on the front of the parent node using the background-position property.

Treeview jQuery Code

I promised to keep my jQuery Treeview code shortest and there it is – just 6 lines.

$("#treeview .parent").click(function (e) {
    e.stopPropagation();
    $(this).find(">ul").toggle("slow");
    if ($(this).hasClass("close"))
        $(this).removeClass("close");
    else
        $(this).addClass("close");
});

I added a jQuery click event on parent node. This toggles its children, and at the same time change the sign by applying or removing the close class.

DEMO DOWNLOAD

Conclusion
This completes the jQuery Treeview tutorial. You can modify the Html of the treview as your wish, the other codes remains the same.

I hope you liked this tutorial. Do share it on facebook and twitter.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.