jQuery — Multiple content sliders on one page, only move one at a time

Question

I'm trying to create a jQuery content slider that will eventually look like this old 37Signals tourpage for Basecamp: http://cl.ly/2K2l1e010w0b3q1g261N (sadly, they changed the site TODAY when the updated Basecamp).

I basically want to have multiple content sliders on one page. Currently clicking the links in one sidebar makes both content areas slide.

And the fiddle: http://jsfiddle.net/saltcod/dm2dn/

Thanks for the help

Terry

Answer 1

Something tells me there's a cleaner way to do this, however the following works. It finds the index of the link clicked, and then does the slider animation based on that. jsFiddle example.

jQuery: //handle nav click $(".nav a").click(function(e) {

    //stop browser default
    e.preventDefault();

    //remove on states for all nav links
    $(".nav a").removeClass("on");

    //add on state to selected nav link
    $(this).addClass("on");

    //set margin of slider to move
    if ($(".nav a").index(this) <= 4) {
        $(".slider:eq(0)").animate({
            marginLeft: margins[$(this).attr("href").split("#")[1]]
        });
    } else {
        $(".slider:eq(1)").animate({
            marginLeft: margins[$(this).attr("href").split("#")[1]]
        });
    }
});​

Note that the feeling I have about an easier way probably involves changing the layout and adding other elements to wrap the content separately.

UPDATE

Here's new jQuery to handle any number of groups and links:

//handle nav click
$(".group a").click(function(e){

    //stop browser default
    e.preventDefault();

    //remove on states for all nav links
    $(".nav a").removeClass("on");

    //add on state to selected nav link
    $(this).addClass("on");

    //set margin of slider to move
    $(this).parents('.group').find('.slider').animate({
        marginLeft: margins[$(this).attr("href").split("#")[1]]
    });                    
});

jsFiddle example. The jQuery changes are minor and the only HTML changes were wrapping each group of list/divs in a wrapper div with the class of group like this:

<div class="group">
    <ul class="nav">
        <li class="thumb1"><a href="#panel1" title="Panel 1">Panel 1</a></li>
        <li><a href="#panel2">Panel 2</a></li>
        <li><a href="#panel3">Panel 3</a></li>
        <li><a href="#panel4">Panel 4</a></li>
        <li><a href="#panel5">Panel 5</a></li>
    </ul>
    <div class="panels">
        <div class="slider">
            <div id="panel1">
                <p>From this day forward, Flight Control will be known by two words:
                &#39;Tough&#39; and &#39;Competent.&#39; </p>
                <p>It&#39;s just mind-blowingly awesome. I apologize, and I wish I was
                more articulate, but it&#39;s hard to be articulate when your mind&#39;s
                blown—but in a very good way.</p>
            </div>
            <div id="panel2">
                <p>From this day forward, Flight Control will be known by two words:
                &#39;Tough&#39; and &#39;Competent.&#39; Tough means we are forever accountable
                for what we do or what we fail to do. We will never again compromise
                our responsibilities. </p>
                <p>Every saint and sinner in the history of our species lived there--on
                a mote of dust suspended in a sunbeam.</p>
            </div>
            <div id="panel3">
                <p>These words are the price of admission to the ranks of Mission
                Control.</p>
                <p>It&#39;s just mind-blowingly awesome. I apologize, and I wish I was
                more articulate, but it&#39;s hard to be articulate when your mind&#39;s
                blown—but in a very good way.</p>
            </div>
            <div id="panel4">
                <p>From this day forward, Flight Control will be known by two words:
                &#39;Tough&#39; and &#39;Competent.&#39; Tough means we are forever accountable
                for what we do or what we fail to do. </p>
                <p>Look again at that dot. That&#39;s here. That&#39;s home. That&#39;s us.
                On it everyone you love, everyone you know, everyone you ever heard
                of, every human being who ever was, lived out their lives. </p>
            </div>
            <div id="panel5">
                <p>The view of the Earth from the Moon fascinated me—a small disk,
                240,000 miles away. </p>
                5
                <p>The view of the Earth from the Moon fascinated me—a small disk,
                240,000 miles away. </p>
                5 </div>
        </div>
    </div>
</div>

Answer 2

The basic approach that will help you manage this is to insulate each of the instances within a $.each loop. Here's some pseudo code that should help explain

$('.myModuleWrapper').each(function(){
        var $this=$(this);      

        /* now when attach handlers we only search within current instance*/
        var $myClicker=$this.find('.myClickerClass');       
        var $myContent=$this.find('.myContentClass');       


        $myClicker.find('.myClickerClass').click(function(){
            $myContent.doSomething();
        });                               

})