Parent/Child Div Box Menu

by beej

HTML

Parent:
<div>
    <ul id="Parent">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
    </ul>  
</div>
Child:
<div>
    <ul id="Child">
        <li class="template"><a href="#">Template</a></li>
    </ul>
</div>

CSS

div > ul {
    margin-left: 25px;    
}

a, a:visited {
    color: blue;
}

.template {
    display: none;
}

JavaScript

var menuOptions = {
    A: ["A1", "A2", "A3"],
    B: ["B1", "B2", "B3"],
    C: ["C1", "C2", "C3"]   
};

$(function() {
    var selected = $("#Parent li:first > a").text();
    $("#Parent a").click(function(event) {
        event.preventDefault();
        makeChild($(this).text());
    });
});

function makeChild(selection) {
    var template = $("#Child li:first");
    $("#Child li").remove();
    $(template).appendTo("#Child");
    $(menuOptions[selection]).each(function(index, value) {
        $(template).clone()
            .removeClass("template")
            .appendTo("#Child")
            .find("a")
            .text(value);                        
    });
}