Trees Pattern
The styling is in "ux-prototype/custom-bootstrap/css/scss/custom-bootstrap/pattern-trees.scss"
The javascript is in "ux-prototype/custom-bootstrap/js/custom-bootstrap/pattern-trees.js"
Example
Collapse All
-
Parent SCOPE
Label: Abados-
Child SCOPE
Label: Abados- Grand Child SCOPE
- Grand Child SCOPE
-
Child SCOPE
Label: Abados
-
Code
Copy the HTML below and add/remove the ul/li layers as needed
<a href="#" id ="expand-collpase-all" class="collapse_all" >Collapse All</a>
<div class="tree">
<ul><!--Start of parent -->
<li>
<a href="" class="link-node parent-link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Parent</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
<ul>
<li><!--Start of First Child-->
<span><i class="icon-open"></i></span> <a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span> </a>
<ul>
<li class="parent-list-w-thumbnail">
<span><i class="icon-open"></i></span> <span>Grand Child <small class="scope"> SCOPE </small></span>
<ul>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
</ul>
</li>
<li class="parent-list-w-thumbnail">
<span><i class="icon-open"></i></span> <span>Grand Child <small class="scope"> SCOPE </small></span>
<ul>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
</ul>
</li>
</ul>
</li><!--end of First Child-->
<li><!--Start of Second Child-->
<span><i class="icon-open"></i></span> <a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span> </a>
<ul>
<li class="parent-list-w-thumbnail">
<span><i class="icon-open"></i></span> <span>Grand Child <small class="scope"> SCOPE </small></span>
<ul>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
<li>
<a href=""><a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Great Grand Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span></a>
</li>
</ul>
</li>
</ul>
</li><!--end of Second Child-->
</ul>
</li>
</ul> <!--End of parent -->
</div>
How This Works (DO NOT USE CODE BELOW, refer to the code above.)
Structure
This tree is built with unordered list <ul> nesting to create the nesting layer of tree structure.
<div class=“tree”> // Everything is in this div
<ul> // Start of Parent
<li> //first parent
<ul> //Start of Child, basically we use nesting unordered list for the next level of nesting
<li> //First child
<ul> //Start of grand child
<li> </li> //First Grand child
<li> </li> //Second Grand child
<li> </li> //Third Grand child
<li> </li> //Fourth Grand child
<ul> //End of grand child
</li> //End of First child
<li> //Second child
<ul> //Start of grand child
<li> </li> //First Grand child
<li> </li> //Second Grand child
<li> </li> //Third Grand child
<li> </li> //Fourth Grand child
<ul> //End of grand child
</li> //End of Second child
</ul>
</li> // End of Child
</ul>//End of Parent
</div>
The collapse/expand control
This span control is placed as first thing in the list to show the control. It always starts at open state. You can add any such as label inside the span, anything that you add in this span will be part of the control.
<span><i class="icon-open"></i></span>
Content after the control
Anything that is not part of the control can be place right after the span (referred to above). In this example, we have a thumbnail and some labels that is a link:<a href="" class="link-node"><img src="../custom-bootstrap/img/placeholder_50x75.jpg" height="50px" width="75px"> <span > <medium class="node-label"> Child</medium> <small class="scope"> SCOPE </small><br><small class="scope"> Label: Abados</small></span> </a>
Expand All / Collpase All
This code control the Expand All/ Collapse All functionality.
By default it is set to 'Expand All', so you have collapse all functionality.
To set default to 'Collapse All', you can do the following:
1.Set al grand children to hidden in CSS.
2.Change class="collapse_all" to class="expand_all" in the code snipet below.
3.Change the text "Collapse All" to "Expand All"
<a href="#" id ="expand-collpase-all" class="collapse_all" >Collapse All</a>