jQuery Treeview

The jQuery Treeview plug-in is used to change a sequenceless table to a scalable, collapsible tree for navigation. The plug-in supports location and cookie-based persistence.

The plug-in is currently version 1.4.1 and will be consolidated as part of the jQuery UI in the future.

Visit the jQuery Treeview website to download the jQuery Treeview plug-in.

In addition, there are many jQuery tree plug-ins that can replace Treeview, such as jsTree.

At the end of this tutorial, it is recommended that you do jQuery practice to reinforce what you have just learned

Example of a file tree

Before you can use jQuery Treeview, HTML documents need to contain several files such as jquery.js, jquery.treeview.js, jquery.treeview.css which you can download from the official website.

<ul id="browser" class="filetree treeview-famfamfam">
    <li><span class="folder">Folder 1</span>
        <ul>
            <li><span class="folder">Item 1.1</span>
                <ul>
                    <li><span class="file">Item 1.1.1</span></li>
                </ul>
            </li>
            <li><span class="folder">Folder 2</span>
                <ul>
                    <li><span class="folder">Subfolder 2.1</span>
                        <ul id="folder21">
                            <li><span class="file">File 2.1.1</span></li>
                            <li><span class="file">File 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="folder">Subfolder 2.2</span>
                        <ul>
                            <li><span class="file">File 2.2.1</span></li>
                            <li><span class="file">File 2.2.2</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
                <ul>
                    <li><span class="file">File 3.1</span></li>
                </ul>
            </li>
            <li><span class="file">File 4</span></li>
        </ul>
    </li>
</ul>