Saturday, April 13, 2013

Jquery expandable tree and toggle tree exmple



We can use jQuery to display or hide a tree, items or lists.
Example code:
<html>
<h1>Jquery expandable tree exmple</h1>
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
    <script>
    $(function() {
    $('div.mytree div:has(div)').addClass('parent');
    $('div.mytree div').click(function() {
        var thistree = $(this);
        thistree.children('div').toggle();
        thistree.filter('.parent').toggleClass('expanded');
        return false;
    });
});
</script>
    <style>
div.mytree div {
 padding-left:20px;
 background:transparent url(http://www3.telus.net/jianlu58/bullet.gif) no-repeat top left;
}
div.mytree div.parent div {
 display:none;
 cursor:default;
}
div.mytree div.parent {
 cursor:pointer ;
 background:transparent url(http://www3.telus.net/jianlu58/plus.gif) no-repeat top left;
}
div.mytree div.expanded {
 background:transparent url(http://www3.telus.net/jianlu58/minus.gif) no-repeat top left;
}</style>
<div class="mytree" style="padding:12px;border:2px solid #ccc;">
    <div>Top tree 1, expandable
        <div>Second tree 2.1</div>
        <div>Second tree 2.2, expandable
            <div>Third tree 2.2.1</div>
            <div>Third tree 2.2.2</div>
            <div>Third tree 2.2.3</div>
        </div>
        <div>Second tree 2.3</div>
    </div>
  </div>  
</html>
Demo
Top tree 1, expandable
Second tree 2.1
Second tree 2.2, expandable
Third tree 2.2.1
Third tree 2.2.2
Third tree 2.2.3
Second tree 2.3

No comments:

Post a Comment