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>