JQuery Treeview List

JQuery Treeview List - Creates a nice expanding and collapsing tree view control using jQuery.



Tree view Displays a hierarchical collection of labeled items, each represented by a TreeNode. This you'll normally see in windows or MAC folder navigation.

Today I am making it in JQuery for ul, li list.

---

Basic HTML Markup

---

[html]
<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>
[/html]

We just created a normal list formation in hierarchical way.

---

Now lets add some styling - CSS

---

[css]
.tree {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
border-color: #BFC0C2 #BFC0C2 #B6B7BA;
border-radius: 3px 3px 3px 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.17), 0 -2px 0 rgba(0, 0, 0, 0.08) inset;
display: inline-block;
margin: 0 0 50px;
min-width: 300px;
padding: 10px 15px 15px;
}
.tree ul {
list-style: none outside none;
}
.tree li a {
line-height: 25px;
}
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree li.parent > a {
padding: 0 0 0 28px;
}
.tree li.parent > a:before {
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
.tree ul li.active > a:before {
background-position: 0 center;
}
.tree ul li ul {
border-left: 1px solid #D9DADB;
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.tree ul li ul li {
position: relative;
}
.tree ul li ul li:before {
border-bottom: 1px dashed #E2E2E3;
content: "";
left: -20px;
position: absolute;
top: 12px;
width: 15px;
}
[/css]


In css we are making tree nodes usinf :before

Last we will add jquery functionality to toggle the list on click events.

---

JQuery

---

[js]
$('.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');
});
[/js]

Here first we search for all parent nodes and if found then we are adding a class named as .parent

Then on click of any parent elements, we just add a class .active and slide the li's in it.

This can be used to show the navigation of the website.