<ul id="tree" class="red_black_tree">
<li class="black" data-key="21382">
<span class="value">Tian An Men</span>
<ul><li class="black" data-key="1701">
<span class="value">Enterprise</span>
<ul><li class="black"></li>
<li class="red" data-key="11574">
<span class="value">Ajax</span>
<ul><li class="black"></li>
<li class="black"></li>
</ul> </li> </ul> </li>
<li class="red" data-key="62158">
<span class="value">Akagi</span>
<ul><li class="black" data-key="42296">
<span class="value">Hood</span>
<ul><li class="red" data-key="26517">
<span class="value">Excalibur</span>
<ul><li class="black"></li>
<li class="black"></li>
</ul> </li>
<li class="red" data-key="45231">
<span class="value">Hornet</span>
<ul><li class="black"></li>
<li class="black"> </li>
</ul> </li> </ul> </li>
<li class="black" data-key="72015">
<span class="value">Sutherland</span>
<ul><li class="black"></li>
<li class="black"></li>
</ul> </li> </ul> </li> </ul> </li> </ul>
<div id="accordion">
<h3><a href="#">Leaves</a></h3>
<div><a href="#" id="showLeafNodes">$('.black:empty').addClass('highlight')</a></div>
<h3><a href="#">Data</a></h3>
<div><a href="#" id="showDataNodes">$('.black:not(:empty), .red').addClass('highlight')</a></div>
<h3><a href="#">Red Siblings</a></h3>
<div><a href="#" id="showRedSiblings">$(".red + .red").add($(".red + .red").siblings()).addClass('highlight');</a></div>
<h3><a href="#">Clear</a></h3>
<div><a href="#" id="clear">$('.highlight').removeClass('highlight')</a></div>
</div>
<script>$("#accordion").accordion();</script>
<link rel="stylesheet" href="http://davidsouther.com/projects/glight/css/glight/glight.css" />
* { color: white; margin: 0; }
ul li { border: thin solid grey; }
.black { background-color: black; }
.red { background-color: red; color: black; }
.highlight { background-color: yellow; color: black; font-weight: bold; }
li { padding-left: 20px; min-height: 1em; }
a {color: blue;}