Going back to previous levels in an outline with jquery without reloading the page

Question

I’m fairly new to jQuery, so forgive me if I’m phrasing this incorrectly.

I’m trying to figure out the easiest way to move backwards through the following hierarchy.

The first page would show 3 topics like this:

Topic 1

Topic 2

Topic 3

When you click on each topic, it would lead you to 3 questions on that particular topic. (Example: You click on Topic 1 and all 3 topics are replaced by a new list that reads):

Question 1

Question 2

Question 3

I’ve gotten that much to work with the following code (repeated for each topic):

$(document).ready(function(){
$(".topic_1").click(function(){
 $('div#questions_1').children().show();
$(".topic_1,.topic_2,.topic_3") .remove ();
$(this).unbind("click");
});
});

$(document).ready(function(){
$(".question_1_1").click(function(){
$(".question_1_2,.question_1_3") .hide ();
$(this).unbind("click");
});
})

What I can’t figure out how to do is to create a pseudo link that would appear when you click through to the 3 questions that when you clicked on it would take you back to having just the original 3 topics on the screen, without having to reload the page.

I'm hoping there's a way to write this so that it will be easy to add additional levels - each of which will have a back link to the previous level. If there were a way to have both forward and backward links, that would be even better.

I’m assuming there is some way to write this so that you’re toggling between the different objects, but can’t seem to get my brain around how to write it.

I’m also assuming that there’s a cleaner way to write the code I’m using, so any help on that end would be greatly appreciated, too.

Thanks in advance for any help you can be.

Updated Question based on reply:

I’m afraid I might not have explained what I’m after quite right.

When people click on any element, all of the other elements at that level are hidden and replaced replaced by just the siblings of the particular element that was clicked on.

So in your example, if I click on Topic 1, both Topic 1 & Topic 2 would be hidden, and “Foo,” “bar,” ; and “Up one level” would show.

And at the next level, when you click on Topic 1 and then click on foo, bar would also be hidden.

Finally, I noticed if I go from Topic to Foo to sub-foo, and then click on sub foo, that there are 2 “Up one level” links that appear under stuff? Is there a way to keep that from happening?

Answer 1

Instead of .remove()ing your topics you could hide() them and then create a link/button in the questions area with a click() handler that .show()s the topics again. Additionally:

1. There's no good reason for you to be unbinding the click handler; that only serves to make them not be able to be clicked again until the javascript is reloaded.
2. To make it infinitely nest-able with questions inside of questions inside of topics... you could just have a class like .expandable that is applied to a <div> that wraps around a header element and any subelements and any <h#> inside an .expandable div is a clickable title to show the next tier and hide itself.
3. You only need $(document).ready(function () {...}); once wrapping all of the code you want to execute at document ready time.

Here's an example of the nest-able solution with links to go back up a level:

<div class="expandable top">
    <h1>Topic 1</h1>
    <div class="expandable">
        <h1>foo</h1>
        <div class="expandable">
            <h1>sub-foo</h1>
            <div class="expandable">
                Stuff
            </div>
        </div>
    </div>
    <div class="expandable">
        <h1>bar</h1>
    </div>
</div>
<div class="expandable top">
    <h1>Topic 2</h1>
    <div class="expandable">
        <h1>foo2</h1>
        <div class="expandable">
            <h1>sub-foo2</h1>
            <div class="expandable">
                Stuff
            </div>
        </div>
    </div>
    <div class="expandable">
        <h1>bar2</h1>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.expandable').hide().filter('.top').show(); //hide every expandable div except the top one
        $('.expandable h1').click(function () {
            $(this).hide(); //hides the header
            $(this).parent().siblings().hide(); //hide the whole tier
            //show the hidden siblings, then add a link to go back up
            $(this).siblings().show().last().after('<a href="#" class="up-link">Up one level</a>');
            //add a click handler to the new link to reverse what we've just done
            $(this).siblings('a.up-link').click(function () {
                $(this).siblings().hide().filter('h1').show();
                $(this).parent().siblings(':not(h1)').show();
                $(this).remove();
                return false; //prevent event propagation on the link so you don't navigate to #
            });
        });
    });
</script>