Jquery toggles between div and then hides the active div

Question

a game on a similar question asked by me, which was kindly answered.

three divs, all hidden. jquery switches between them through different links. it works great! now I would like to click on the link corresponding to the active div and hide it, at the same time as the page loads with all hidden. Now he is disappearing and returning.

help! thank!

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 content</p>
    </div>
    <div id="subscribe">
        <p>SUBSCRIBE content</p>
    </div>
    <div id="contact">
        <p>CONTACT 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');     
        });   
    });

Answer 1

Try it.

Since on fadeOut the current class is deleted if the current size is 0, this means that nothing is selected. We can just fadeIn 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');
}

Jsfiddle example .

Answer 2

:

$(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)});
        }
    });

Answer 3

Check if the element identifier with a click identifies the identifier of the displayed element (i.e. the element with the current class). If this is another element, then exchange must occur. If this is the same element, then it should be hidden and remove its current class ...

(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 content</p>
    </div>
    <div id="subscribe">
        <p>SUBSCRIBE content</p>
    </div>
    <div id="contact">
        <p>CONTACT 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 () and .shows () buttons with fade out.