Toggling multiple DIVs with jQuery

Question

I have three info panels (divs with IDs of panel-one, panel-two and panel-three, all with the class info-panel) which I want to have slide in and out on the click of a link (these have the IDs toggle-one, toggle-two and toggle-three, all with the class toggle). If one of the divs is showing when one of the other links is clicked, I want to hide the visible div and show the new one. If the div's own link is clicked, I want to toggle the show/hide. I'm using the following code to do this:

HTML:

<ul>
    <li><a id="toggle-one" class="toggle">One</a></li>
    <li><a id="toggle-two" class="toggle">Two</a></li>
    <li><a id="toggle-three" class="toggle">Three</a></li>
</ul>

<div id="panel-one" class="info-panel"><!-- content here --></div>
<div id="panel-two" class="info-panel"><!-- content here --></div>
<div id="panel-three" class="info-panel"><!-- content here --></div>

jQuery:

$("#toggle-one").click(function () {
    if($("#panel-two").is(":visible")) {
        $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } else if($("#panel-three").css("z-index", "9997").is(":visible")) {
        $("#panel-three").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }
    $("#panel-one").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

$("#toggle-two").click(function () {
    if($("#panel-one").is(":visible")) {
        $("#panel-one").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } else if($("#panel-three").is(":visible")) {
        $("#formlink").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    } 
    $("#panel-two").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

$("#toggle-three").click(function () {
    if($("#panel-one").is(":visible")) {
        $("#panel-one").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }  else if($("#panel-two").is(":visible")) {
        $("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
    }
    $("#panel-three").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
    return false;
});

It works, but it's very verbose and won't scale well - managing three divs of info is fine, but if/when the time comes to add more, it's going to turn into a major pain to maintain. I've tried using an approach like the one outlined in Show/Hide Multiple Divs with Jquery, but can't seem to get it to work properly - the toggle and hide behaviours don't work well (hidden dive show when they shouldn't then immediately hide and things like that). Likewise, I can't seem to get the example shown in Jquery toggle on 3 divs to work, either.

I'm sure there's a much cleaner way to do this, but as I'm a bit of a jQuery and javascript n00b, I don't really know how to go about tidying it up. What's the best way to tackle this?

Answer 1

Taking a steer from what Blender posted, I ended up going with this:

HTML:

<div id="togglelinks">
    <ul>
        <li><a class="toggle" href="#panel-one">One</a></li>
        <li><a class="toggle" href="#panel-two">Two</a></li>
        <li><a class="toggle" href="#panel-three">Three</a></li>
    </ul>
</div>

<div id="panels">
    <div id="panel-one" class="info-panel"><!-- content here --></div>
    <div id="panel-two" class="info-panel"><!-- content here --></div>
    <div id="panel-three" class="info-panel"><!-- content here --></div>
</div>

jQuery:

$(".toggle").click(function() {
    var $toggled = $(this).attr('href');

    $($toggled).siblings(':visible').hide("slide", {direction: 'up'}, 750);
    $($toggled).toggle("slide", {direction: 'up'}, 750);

    return false;
});

Happy with that... 27 lines of javascript down to 6, and it all seems to work! But again, many thanks are due to Blender, since I never would have got to this point otherwise.

Answer 2

thats how I'd do it :

$("info-panel").click(function(){

    //put your div in memory
    var chosen = $(this);

    //Slide down all the toggle div or hide them
    $('.info-panel').slideUp('slow', function(){);

    //open the div you wanted
    chosen.slideToggle('slow',function(){});
}

then, to activate it :

function openDiv(divId){
$("#"+divId).click();
}

on the html, after the a href="#" ... set the onclick attribute

a href="#" onclick="openDiv('panel-one')"

Answer 3

Wrap your panels in a <div> with an id of panels:

<div id="panels">
  <div class="info-panel"><!-- content here --></div>
  <div class="info-panel"><!-- content here --></div>
  <div class="info-panel"><!-- content here --></div>
</div>

and this should work:

$(".toggle").on('click', function() {
    var $panel = $('#panels').children().eq($(this).parent().index());

    $panel.toggle("slide", {direction: 'up'}, 750);
    $panel.siblings().hide("slide", {direction: 'up'}, 750);

    return false;
});