Animated Tree View Plugin For jQuery and Bootstrap 3 - MultiNestedLists

MultiNestedLists is a jQuery plugin to create an animated & nice looking tree view structure using Bootstrap and nested Html lists. Click the '+' / '-' icons will expand or collapse the current level with a smooth sliding effect.

How to use it:

1. Include the latest version of jQuery library and Boostrap 3's CSS on the web page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include the required Font Awesome framework to add button to expand and condense.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

3. Include the jQuery Multi Nested Lists plugin after jQuery library.

<link rel="stylesheet" href="style.css">
<script src="MultiNestedList.js"></script>

4. Create the Html for a tree view using nested unordered lists.

<ul>
<li><a href="#"> Level 1 </a>
    <ul>
    <li><a href="#"> Level 1.1 </a>
        <ul>
        <li><a href="#"> Level 1.1.1 </a></li>
        <li><a href="#"> Level 1.1.2 </a></li>
        <li><a href="#"> Level 1.1.3 </a></li>
        <li><a href="#"> Level 1.1.4 </a></li>
        </ul>
    </li>
    <li><a href="#"> Level 1.2 </a>
        <ul>
        <li><a href="#"> Level 1.2.1 </a></li>
        <li><a href="#"> Level 1.2.2 </a></li>
        <li><a href="#"> Level 1.2.3 </a></li>
        <li><a href="#"> Level 1.2.4 </a></li>
        </ul>
    </li>
    <li><a href="#"> Level 1.3 </a>
        <ul>
        <li><a href="#"> Level 1.3.1 </a></li>
        <li><a href="#"> Level 1.3.2 </a></li>
        <li><a href="#"> Level 1.3.3 </a></li>
        <li><a href="#"> Level 1.3.4 </a></li>
        </ul>
    </li>
    </ul>
</li>
</ul>

Change log:

2014-05-27

• fix for Font Awesome 4.1+ by jQueryScript.net

---

This awesome jQuery plugin is developed by olivsamuk. For more Advanced Usages, please check the demo page or visit the official website.