Question

I am trying to toggle via a select option. I am having difficulties toggling more than two. My goal is to be able toggle as far as 4 through the select option. For example Categories and subcategories. Here is my example in jsfiddle.

<script type="text/javascript">
    var op = $("#tables option[value='options']:selected");
    var os = $("#tables option[value='Example2']:selected");
    if (op.length)
        $("#something").show();
    else
        $("#something").hide();
    if (op == ("#something").show())
             $("#something2").show();
    else
        $("#something2").hide();

}​
</script>

Answer 1

Is this the design pattern you are looking for?

if your object is not selected
    if your parent is selected
        you are also selected
    else
        you are selected
else
    you are now unselected

This logic will work for any depth of recursion.

EDIT: Assuming each menu is a ul. You’ll have to tweak the selectors.
This is just one way to do it. Not the best if you have events firing on visibility, or if you have ui reflow issues.

clickyclicky = function(event) {
    var $target = $(event.currentTarget);
    if (!$target.hasClass("selected")) {
        // hide the old target and its parents
        var $oldTarget = $('.selected');
        $oldTarget.removeClass("selected").hide().parents('ul').hide();
        // show the new target and its parents
        $target.show().addClass("selected").parents('ul').show();
    } else {
        // hide the target
        $target.removeClass("selected").hide();
        // move the selected token to the parent.
        $parent = $target.parent().parent(); // assuming an ul/li tree pattern.
        if ($parent.is('ul')) {
            $parent.addClass("selected");
        }
    }
}

I haven’t tested this code, it’s just a general reference.

EDIT: Here’s the Fiddle: http://jsfiddle.net/uA7XD/76/