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:
<h1>Jquery expandable tree exmple</h1>
    <script src=""
    $(function() {
    $('div.mytree div:has(div)').addClass('parent');
    $('div.mytree div').click(function() {
        var thistree = $(this);
        return false;
div.mytree div {
 background:transparent url( no-repeat top left;
div.mytree div.parent div {
div.mytree div.parent {
 cursor:pointer ;
 background:transparent url( no-repeat top left;
div.mytree div.expanded {
 background:transparent url( no-repeat top left;
<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>Second tree 2.3</div>
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