jQuery hide one div show another

Question

I have the following website: http://driz.co.uk/taschen/

I'm wanting to make it so when a user clicks the toggle div the currently shown ipad is faded out and the other ipad is faded in. And vice-versa.

How do I do this using jQuery? Thanks.

Answer 1

You can do it by using .toggle() to alternate between functions, like this:

$("#toggle").toggle(function() {
  $("#ipad-portrait").fadeOut(function() { $("#ipad-landscape").fadeIn(); });
}, function() {
  $("#ipad-landscape").fadeOut(function() { $("#ipad-portrait").fadeIn(); });
});

Or, using .click() (there are a few ways, this is one of them):

$("#toggle").click(function() {
  var ipads = $("#ipad-portrait, #ipad-landscape"), 
      current = ipads.filter(":visible").fadeOut(function() {
                  ipads.not(current).fadeIn();
                });
});

Answer 2

$("#toggle").click(function() {
    $("#ipad-landscape, #ipad-portrait").toggle();
});

Aha, you want fading...

Answer 3

You can use the fadeToggle() function added in jQuery 1.4.4 (You need to update to this version from the version 1.4.2 script you're using on that page):

$('#toggle').click(function(){
    $('#ipad-portrait, #ipad-landscape').fadeToggle(300);
});