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 vi

Solution 1:

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.

Solution 2:

$(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/

Solution 3:

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:

<divid="content"><h2>PHOTOS</h2><hr /><palign="left"><aid="show_promo">PROMO</a><aid="show_studio">STUDIO</a><aid="show_live">LIVE</a></p><divid="promo"class="current"><palign="center">PROMO</p><palign="center"><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /></p><palign="center"><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /></p></div><divid="studio"><palign="center">STUDIO</p><palign="center"><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /></p><palign="center"><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /></p></div><divid="live"><palign="center">LIVE</p><palign="center"><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /></p><palign="center"><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /><imgsrc="#" /></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;
}

Solution 4:

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:

<divid="content"><h2>PHOTOS</h2><hr /><palign="left"id="links"><aid="show_promo"gallery="promo">PROMO</a><aid="show_studio"gallery="studio">STUDIO</a><aid="show_live"gallery="live">LIVE</a></p><divid="galleries"><divid="promo"class="gallery"><palign="center">PROMO</p><palign="center"><imgsrc="#" /></p></div><divid="studio"class="gallery"><palign="center">STUDIO</p><palign="center"><imgsrc="#" /></p></div><divid="live"class="gallery"><palign="center">LIVE</p><palign="center"><imgsrc="#" /></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!

Solution 5:

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.