jquery toggle between divs and subsequently hide active div

a play on a similar question asked by me that was graciously answered.

three divs, all hidden. jquery toggles between them via different links. this works great! now, i'd like to clink the link corresponding to the active div and hide it, esentially the same as when the page loads with all of them hidden. right now it fades out and back in.

help! thank you!

HTML:

 <div id="nav">
    <a class="home" id="show_about" title="About">ABOUT</a><br />
    <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
    <a class="home" id="show_contact" title="Contact">CONTACT</a>
 </div>
 <div id="content">
    <div class="current" id="about">
        <p>ABOUT's content</p>
    </div>
    <div id="subscribe">
        <p>SUBSCRIBE's content</p>
    </div>
    <div id="contact">
        <p>CONTACT's content</p> 
    </div>
</div>

Javascript:

    $(function(){开发者_高级运维
        $('#about').css('display', 'none');
        $('#subscribe').css('display', 'none');
        $('#contact').css('display', 'none');
    });
    $('.home').click(function(){   
        var id = $(this).html().toLowerCase();
        $('.current').fadeOut(600, function(){
            $('#'+id).fadeIn(600);
            $('.current').removeClass('current');
            $('#'+id).addClass('current');     
        });   
    });

Try this out..

Since on fadeOut the current class is removed, if the size of current is 0 it means nothing is selected. We can simply fadeIn the content div.

$('#about, #subscribe, #contact').hide();

$('.home').click(function() {
    var id = $(this).html().toLowerCase();
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function(){showContent($content)});
    }
});

function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}

Example on jsfiddle.

Here is another approach:

$(function(){
        $('#content div').hide();
    });

    $('.home').click(function(){
        var targetSelector = '#' + $(this).attr('title').toLowerCase();
        var targetShown = $(targetSelector).is(':visible');

        if (targetShown) {
            $(targetSelector).fadeOut(600);
        } else {
            $('#content div:not(' + targetSelector + ')').fadeOut(600,
                                      function() {$(targetSelector).fadeIn(600)});
        }
    });

Check to see if the id of the clicked element is equal to the id of the element currently being displayed (i.e. the element with the current class). If it is a different element, then a swap needs to take place. If it is the same element, then it needs to be hidden and have its current class removed...

(Edit: fixed code)

HTML:

<div id="nav">
    <a class="home" id="show_about" title="About">ABOUT</a><br />
    <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
    <a class="home" id="show_contact" title="Contact">CONTACT</a>
 </div>
<br />
<br />
<br />
 <div id="content">
    <div id="about">
        <p>ABOUT's content</p>
    </div>
    <div id="subscribe">
        <p>SUBSCRIBE's content</p>
    </div>
    <div id="contact">
        <p>CONTACT's content</p>
    </div>
    <div class="current" id="dummy"></div>
</div>

JS:

$().ready(function()
{
        $('#about').hide();
        $('#subscribe').hide();
        $('#contact').hide();
        $('#dummy').hide();


  $('.home').click(function() {   
    var id = $(this).html().toLowerCase();  

      if ($('.current').length >0) {
      if($('.current')[0].id.toLowerCase() != id)
        {
          $('.current').hide();
          $('.current').removeClass('current');
          $('#'+id).addClass('current');     
          $('#'+id).show();
        }
        else
        {
          $('.current').hide();
          $('.current').removeClass('current');
          $('#dummy').addClass('current');
        }
      }
  });
});

Just replace the .hide()'s and .shows()'s with fades in and out.