Question

I have code that lets me to show an element on click of one element and hide it on click of another. Code looks like:

      $('.downloads').hide()
      $('.downloads').css({visibility:'visible'})
      var Dshow=false;                     
      $('.allLink').click(function() {     
      if(!Dshow){
          Dshow=true;
          $(".downloads").fadeIn("fast");
           $('#footer2').html($('#footer1').html()); 
           $('#footer1').html('');}
           
    });
     $('.hideAllLink').click(function() {
     if(!!Dshow){
   Dshow=false;
           $(".downloads").fadeOut("fast");
           $('#footer1').html($('#footer2').html());
           $('#footer2').html('');}
    });

I want $('.allLink').click(function() to have 2 states – on first click it shall show ".downloads" and on second click hide.

How to do such thing with jQuery?

Answer 1

I think what you are looking for is a toggler: Use of jQuery toggle function

Use

$( "#idofthebutton" ).toggle(

                function() {
                    /// hide the link
                   $(".downloads").fadeOut("fast");
                }, function() {
                    ///show the link
                 $(".downloads").fadeIn("fast");
                }

   );

This will work automatically to hide and show the links….

Note: In this case keep the links visible at first place. If you don’t want that then change the order of the functions inside the .toggle