Create a custom toggle with jQuery

Question

I have the following code, which fades in HTML via a .load into a .pop-up modal.

$('.about').click(function(){
    $('.pop-up').load('about.php', function(){
        $(this).fadeIn();
    });

However, I need a second click to make the .about fade out. I understand certain toggle functions are now deprecated. Is there a current method I could use? I have a couple of these functions which will need toggling throughout the code.

Any help would be great.

see http://stackoverflow.com/questions/14382857/what-to-use-instead-of-toggle-in-jquery-1-8/14383246#14383246 — Arun P Johny, Nov 26 '13 at 11:13
Nope. [.toggle()](http://api.jquery.com/toggle/) can be used. — Praveen, Nov 26 '13 at 11:14

score 0 · Answer 1 · answered Nov 26 '13 at 11:13

0

$('.about').click(function(){
  $('.pop-up').load('about.php', function(){
    $(this).toggle( "slow", function() {
    // Animation complete.
  });
});

http://api.jquery.com/toggle/

answered Nov 26 '13 at 11:13

Rahul Kadukar

858
3
15
35

score 0 · Answer 2 · answered Nov 26 '13 at 11:15

you can use toggle but by custom code you can do your customization very well

    var toggle=0;
    $('.about').click(function(){
   var $this=$('this');
    if(!toggle)
    {
    $('.pop-up').load('about.php', function(){
            $this.fadeIn();
          toogle=1;
        });
    }
    else{// or do other action which you want
           $this.fadeOut();
        toggle=0;

    }
    });

Create a custom toggle with jQuery

2 Answers2