Thursday 3 April 2014

Treeview using Javascript

CSS  :

<style>
        body {
            font-family: Verdana, helvetica, arial, sans-serif;
            font-size: 0.8em;
        }

        .treeview, .treeview ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

            .treeview ul {
                background-color: white;
                margin-top: 4px;
            }

            .treeview .hitarea {
                background: url(image/treeview-default.gif) -64px -25px no-repeat;
                height: 16px;
                width: 16px;
                margin-left: -16px;
                float: left;
                cursor: pointer;
            }
        /* fix for IE6 */
        * html .hitarea {
            display: inline;
            float: none;
        }

        .treeview li {
            margin: 0;
            padding: 3px 0pt 3px 16px;
        }

        .treeview li {
            background: url(image/TrLine.gif) 0 0 no-repeat;
        }

            .treeview li.collapsable, .treeview li.expandable {
                background-position: 0 -174px;
            }

        .treeview .expandable-hitarea {
            background-position: -80px -3px;
        }

        .treeview li.last {
            background-position: 0 -1763px;
        }

        .filetree span.folder, .filetree span.file {
            padding: 1px 0 1px 22px;
            display: inline;
        }

        .filetree span.folder {
            background: url(image/folder.gif) 2px 0 no-repeat;
        }

        .filetree span.file {
            background: url(image/inbox.gif) 2px 0 no-repeat;
        }

        .lastIcon {
            background-position: -48px -45px !important;
        }

        .click:hover {
            cursor: pointer;
        }
    </style>

Javascript :
<script>
        $(document).ready(function () {
            $(".click").click(function () {
                $(this).next().slideToggle(200);
            })
        })
    </script>

HTML :

<div style="width:400px;">
            <ul id="browser" class="filetree treeview">
                <li class="closed expandable">
                    <div class="click">
                        <div class="hitarea closed-hitarea expandable-hitarea"></div>
                        <span class="folder">Folder 1</span>
                    </div>
                    <ul style="display: none;">
                        <li class="last"><span class="file">Item 1</span></li>
                    </ul>
                </li>
                <li class="collapsable">
                    <div class="click">
                        <div class="hitarea collapsable-hitarea"></div>
                        <span class="folder">Folder 2</span>
                    </div>
                    <ul>
                        <li class="last"><span class="file">Item 1</span></li>
                    </ul>
                </li>
                <li class="collapsable">
                    <div class="click">
                        <div class="hitarea collapsable-hitarea"></div>
                        <span class="folder">Folder 3</span>
                    </div>
                    <ul>
                        <li class="collapsable">
                            <div class="click">
                                <div class="hitarea collapsable-hitarea"></div>
                                <span class="folder">Subfolder 1</span>
                            </div>
                            <ul id="folder21" style="display: block;">
                                <li><span class="file">Item 1</span></li>
                                <li class="last"><span class="file">Item 2</span></li>
                            </ul>
                        </li>
                        <li class="last"><span class="file">Item 1</span></li>
                    </ul>
                </li>
                <li class="last closed expandable">
                    <div class="click">
                        <div class="lastIcon hitarea closed-hitarea expandable-hitarea"></div>
                        <span class="folder">Folder 4</span>
                    </div>
                    <ul style="display: none;">
                        <li class="last"><span class="file">Item 1</span></li>
                    </ul>
                </li>

            </ul>

        </div>


Download source code from here

No comments:

Post a Comment