<script>
$(function() {
$(‘div.tree div:has(div)’).addClass(‘parent’); // Requires jQuery 1.2!
$(‘div.tree div’).click(function() {
var o = $(this);
o.children(‘div’).toggle();
o.filter(‘.parent’).toggleClass(‘expanded’);
return false;
});
});
</script>
<style>
div.tree div {
padding-left:16px;
}
div.tree div.parent div {
display:none;
cursor:default;
}
div.tree div.parent {
cursor:pointer !important;
background:transparent url(plus.gif) no-repeat top left;
}
div.tree div.expanded {
background:transparent url(minus.gif) no-repeat top left;
}
</style>
<div class=”tree” style=”border: 1px solid rgb(204, 204, 204); padding: 10px;”>
<div class=”parent expanded”>Item 1
<div style=”display: block;”>Item 1.1</div>
<div style=”display: block;” class=”parent”>Item 1.2
<div style=”display: none;”>Item 1.2.1</div>
<div style=”display: none;”>Item 1.2.2</div>
<div style=”display: none;”>Item 1.2.3</div>
</div>
<div style=”display: block;”>Item 1.3</div>
</div>
<div class=”parent”>Item 2
<div>Item 2.1</div>
<div class=”parent”>Item 2.2
<div>Item 2.2.1</div>
<div>Item 2.2.2</div>
<div>Item 2.2.3</div>
</div>
<div>Item 2.3</div>
</div>
<div class=”parent”>Item 3
<div>Item 3.1</div>
<div class=”parent”>Item 3.2
<div>Item 3.2.1</div>
<div>Item 3.2.2</div>
<div>Item 3.2.3</div>
</div>
<div>Item 3.3</div>
</div>
</div>