Javascript toggle between three hidden divs

Hey all, Newbie here, so please forgive my approach and specifics. I'd appreciate some help!

I'm working on an image gallery that's got three sections, of which only one will be visible at a time. At the top of the page there are three links that I want to toggle one of the three sections to show while hiding the other two.

The code I've written is poor and works only from Link 1 to Link 2 to Link 3, but not backwards or from link 1 to 3, 3 to 1, etc.

Thanks for your help and advice!

HTML:

<div id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left"><a id="show_promo">PROMO</a> <a id="show_studio">STUDIO</a> <a id="show_live">LIVE</a></p>
    <div id="promo">
        <p align="center">PROMO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <im开发者_如何学Pythong src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="studio">
        <p align="center">STUDIO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="live">
        <p align="center">LIVE</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
</div>

Javascript:

$('#studio').css('display', 'none');
    $('#live').css('display', 'none');
    $('#show_studio').click(function(){
        $('#promo').fadeOut(600, function(){
            $('#studio').fadeIn(600);
        });
    });
    $('#show_live').click(function(){
        $('#studio').fadeOut(600, function(){
            $('#live').fadeIn(600);
        });
    });
    $('#show_promo').click(function(){
        $('#live').fadeOut(600, function(){
            $('#promo').fadeIn(600);
        });
    });

The problem here is that you are hardcoding which element needs to be faded out. It would be better to select this dynamically.

First, you should add a class to your #show- links and to your divs. Perhaps showlink and section would be a good class names. You can then use jQuery's :visible selector to find the currently visible div.

$('a.showlink').click(function(){
    var toShow = this.id.substr(5);
    $('div.section:visible').fadeOut(600, function(){
        $('#' + toShow).fadeIn(600);
    });
});

This should then work for all your links and divs.

$(function() {
    $("#content p a").click(function() {
        var selector = this.id.substring(this.id.indexOf("_") + 1);
        $("#" + selector).fadeIn().siblings("div").fadeOut();
    });
});

http://jsfiddle.net/rfvgyhn/UdRrd/

Working example on jsfiddle: http://jsfiddle.net/Damien_at_SF/umcG2/

When any of the anchers is clicked this will read i'ts HTML and utilise it as the ID of the new div to show. The current div has a class called current that will be swapped out once the fade effects are complete. This way, you can address your fade out with $('.current') and you can address the div you want to fade in with $('#'+id)...

Hope this helps :)

HTML:

<div id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left"><a id="show_promo">PROMO</a> <a id="show_studio">STUDIO</a> <a id="show_live">LIVE</a></p>
    <div id="promo" class="current">
        <p align="center">PROMO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="studio">
        <p align="center">STUDIO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="live">
        <p align="center">LIVE</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
</div>

JS:

$('p a').click(function(){

    var id = $(this).html().toLowerCase();

    $('.current').fadeOut(600, function(){
        $('#'+id).fadeIn(600);
        $('.current').removeClass('current');
        $('#'+id).addClass('current');

    });

});

CSS:

#studio {
    display:none;
}
#live {
    display:none;
}

There's a generic way todo this. It's important that you group and identfy all divs that represents a gallery. Then, you need to find a way to inform the links which gallery they have to show:

HTML:

<div id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left" id="links">
        <a id="show_promo" gallery="promo">PROMO</a>
        <a id="show_studio" gallery="studio">STUDIO</a>
        <a id="show_live" gallery="live">LIVE</a>
    </p>
    <div id="galleries">
        <div id="promo" class="gallery">
            <p align="center">PROMO</p>
            <p align="center">
                <img src="#" />
            </p>
        </div>
        <div id="studio" class="gallery">
            <p align="center">STUDIO</p>
            <p align="center">
                <img src="#" />
            </p>
        </div>
        <div id="live" class="gallery">
            <p align="center">LIVE</p>
            <p align="center">
                <img src="#" />
            </p>
        </div>
    </div>
</div>

JS:

$("#links a").click(function() { // for every link in #links
    $("#galleries .gallery:not(#" + $(this).attr("gallery") + ".gallery)").slideUp(); // hide ALL galleries
    $("#galleries #" + $(this).attr("gallery") + ".gallery").slideDown() // show the gallery associated to this link
});

Good luck!

Remember that for every one of your divs, you'll need to fade out both of the others. So, in pseudocode for clarity, you'll want something like

 $('#show_live").click(function(){
     // fade out "studio"
     // fade out "promo"
     // fade IN "live"
  });

I believe there's a way to have jQuery fade two divs simultaneously but I don't recall it offhand.

The better approach would be to use a generic class, so you dont have to adress each container seperately and can add new ones with out rewriting your code at a later point in time.

What I usually do for stuff like this is hide all of the containers and then append them to a display div that contains the visible content.

Markup

<a href="#" rel="one" class="view-port-trigger">Panel One</a>
<a href="#" rel="two" class="view-port-trigger">Panel Two</a>
<a href="#" rel="three" class="view-port-trigger">Panel Three</a>

<div class="gallery-pane" id="one"><h1>panel one</h1></div>
<div class="gallery-pane" id="two"><h1>Panel Two</h1></div>
<div class="gallery-pane" id="three"><h1>Panel Three</h1></div>
<div class="gallery-view-port"></div>

jQuery

var $viewPort = $(".gallery-view-port"),
    curSelection;
$(".gallery-pane").css('display', 'none');
$(".view-port-trigger").bind('click', function(index, el){
   if(curSelection !== $(this).attr('rel')){
      curSelection = $(this).attr('rel');
      markupToInject = $("#" + curSelection);
      $viewPort.children()
          .fadeTo(500, 0)
          .delay(500)
          .queue(function(n){
               //append the cloned selection in a queue
               $viewPort.append(markupToInject.clone())
           })
           .fadeTo(500, 1);
   }
});

You might have to fudge around with the actual appending and fading in but in theory it should work.

-Cheers!