Question

I have a jquery script which replaces 1 div with another and replaces 1 link with another when it is selected:

$('.child2, a[href="#1"]').hide()

$('#replacepagelinks a').click(function(){
     $(this).hide().siblings().show()
     var w = this.hash.replace('#', '');
     $('#parent div.child'+w).show().siblings().hide()
})

Here is my html:

<div id="parent">
   <div class="child1">Child 1 Contents</div>
   <div class="child2">Child 2 Contents</div>
</div>
<div id="replacepagelinks">
     <a href="#1">Replace Child 1 with Child 2</a>
     <a href="#2">Replace Child 2 with Child 1</a>
</div>

Please check out this jsfiddle http://jsfiddle.net/KaqZ5/ for a working example.

This works great, however i need it to work with up to 5 divs like so:

1. In child1 i would like only <a href="#1">Replace Child 1 with Child 2</a>

2. In child2 i would like <a href="#2">Replace Child 2 with Child 1</a> and <a href="#3">Replace Child 2 with Child 3</a>

3. In child3 i would like <a href="#3">Replace Child 3 with Child 2</a> and <a href="#4">Replace Child 3 with Child 4</a>

4. In child4 i would like <a href="#4">Replace Child 4 with Child 3</a> and <a href="#5">Replace Child 4 with Child 5</a>.

5. In child5 i would like only <a href="#5">Replace Child 5 with Child 4</a>

So each page has a ‘next’ and ‘back’ link except for the first page which only has a ‘next’ link and the last page which only has a ‘back’ link and i need this to support 2 child div’s, 3 child div’s and 4 child div’s as well.

My experience with jquery is almost nil so if somebody can please update my jsfiddle i would be very grateful.

Answer 1

See the updated fiddle at http://jsfiddle.net/Palpatim/KaqZ5/7/

Revised HTML:

<div class="menu">
    <div class="menu_item">
        <div class="parent">
            <div class="child1">Child 1 Contents</div>
            <div class="child2">Child 2 Contents</div>
            <div class="child3">Child 3 Contents</div>
            <div class="child4">Child 4 Contents</div>
            <div class="child5">Child 5 Contents</div>
        </div>
        <div class="nav">
            <a class="prev" href="#">Back</a>
            <a class="next" href="#">Next</a>
        </div>
    </div>

    <div class="menu_item">
        <div class="parent">
            <div class="child1">Child 1 Contents</div>
            <div class="child2">Child 2 Contents</div>
            <div class="child3">Child 3 Contents</div>
        </div>
        <div class="nav">
            <a class="prev" href="#">Back</a>
            <a class="next" href="#">Next</a>
        </div>
    </div>
</div>

New CSS

/* Initially hide all menu items */
.parent div {
    display: none;
}

/* Show active item */
.parent div.active {
    display: block;
}

/* If a nav link is disabled, color it grey and set the cursor to an arrow */
a[disabled="disabled"] {
    color: #999;
    cursor: default;
}

​Revised JavaScript

// Set the initial menu state: Each 'prev' link is disabled and the first menu item 
// for each menu block is active
$('a.prev').attr('disabled', 'disabled');
$('.parent div:first-child').addClass('active');

$('a.next').click(function() {
    // Find the parent menu container 
    // - parent of (this) is div.nav
    //   - parent of div.nav is div.menu_item
    var menu = $(this).parent().parent();

    // Find the currently active menu item
    var active = $('.active', menu);

    // Find the next menu item in the list
    var nextItem = active.next();

    // If there is a next menu item, make it active
    if (nextItem.length) {
        // Make current item inactive
        active.removeClass('active');
        // Make new item active
        nextItem.addClass('active');

        // If there's no item after the new item,
        // disable navigation
        if (!nextItem.next().length) {
            $('a.next', menu).attr('disabled', 'disabled');
        }

        // If we just clicked 'next', we can enable the 'prev' button
        if ($('a.prev', menu).attr('disabled') == 'disabled') {
            $('a.prev', menu).removeAttr('disabled');
        }
    }
});

// Pretty much same as above, with the directions reversed
$('a.prev').click(function() {
    var menu = $(this).parent().parent();
    var active = $('.active', menu);
    var prevItem = active.prev();
    if (prevItem.length) {
        active.removeClass('active');
        prevItem.addClass('active');
        if (!prevItem.prev().length) {
            $('a.prev', menu).attr('disabled', 'disabled');
        }
        if ($('a.next', menu).attr('disabled') == 'disabled') {
            $('a.next', menu).removeAttr('disabled');
        }
    }
});

Here are some important changes I made from your original:

• Use CSS to hide menu items and re-display them using an .active class. That makes the markup cleaner, and allows you to style
• Use CSS to visually disable the navigation links, rather than suppressing them altogether. You can of course simply hide them, but if it’s truly a user navigation, then you want them to be able to see that the link is simply not applicable, rather than removing it from their view altogether.
• Restructured the navigation to put “Back” before “Next” visually. If you truly want to remove it, you can simply change the CSS definition of the disabled anchors.
• Changed your links to have classes instead of

Some other optimizations you should consider:

• Refactor the guts of the navigation code into a standalone function. It’s nearly the same whether you’re going forward or backward, so consider making the function more abstract by passing in the parent menu element and a desired direction.
• Use a jQuery pagination plugin, like http://www.xarg.org/2011/09/jquery-pagination-revised/ These have the benefit of greater functionality, and in the case of actively developed plugins, they’re likely to be better tested than you’ll be able to do on your own.
• You have two navigation blocks on your page, but each of them have id attributes which conflict. ids must be unique on a page. I changed those to classes instead.
• Consider the case where a menu has one item, or no items. This code will choke on those situations

There are probably a host of other ways to do this, but this should get you started. For futher reading, I recommend perusing the jQuery documentation.