RedBlack HTML

by southerd

HTML

<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">&nbsp;</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...

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;}

JavaScript

$.extend($.ui.accordion.prototype, {
    next: function(){
        var index = this.option('active') || 0,
            next = index + 1;
        return this.activate(next);
    }
});
function clear(){$(".highlight").removeClass('highlight');$("#accordion").accordion("next");}
$('#showLeafNodes').click(function(){clear();$('.black:empty').addClass('highlight');});
$('#showDataNodes').click(function(){clear();$('.black:not(:empty), .red').addClass('highlight');});
$('#showRedSiblings').click(function(){clear();$(".red + .red").add($(".red + .red").siblings()).addClass('highlight');});
$("#clear").click(function(){clear();});