Jquery on click instead of hover

Question

I have this jQuery code that opens an accordeon on hover but i need to make it work each tab on click instead, i've tried to change the "hover" to "click" but no success, could someone here please help me ?

Thanks in advance.

$(function() {
    $('#accordion > li').hover(function() {
        var $this = $(this);
        $this.stop().animate({'width':'480px'},500);
        $('.heading',$this).stop(true,true).fadeOut();
        $('.bgDescription',$this).stop(true,true).slideDown(500);
        $('.description',$this).stop(true,true).fadeIn();
    }, function() {
        var $this = $(this);
        $this.stop().animate({'width':'115px'},1000);
        $('.heading',$this).stop(true,true).fadeIn();
        $('.description',$this).stop(true,true).fadeOut(500);
        $('.bgDescription',$this).stop(true,true).slideUp(700);
    });
});

the idea from Tushar Gupta is the only one that's partially working, it opens the accordeon on click, but if the user clicks another tab while one is open there's a bug...

i make a fiddle with the whole code.

http://jsfiddle.net/C8Kp8/ <-- Tushar Gupta's solution

http://jsfiddle.net/SHmuc/ <-- Original Code

thank you all for your help, its really appreciated.

your logic using animate seems falling, you should use the callback of each animation or a promise or animate it using toggle — A. Wolff
– A. Wolff, Commented Nov 20, 2013 at 11:40

Alex · Accepted Answer · 2013-11-20 11:29:00Z

1

You can use .toggle() or this

    $(function() {
    $('#accordion > li').click(function() {
        var $this = $(this);

        if ($this.hasClass('open')) {
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
            $this.removeClass('open');
        }
        else {
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
            $this.addClass('open');
        }
    });
});

answered Nov 20, 2013 at 11:29

Alex

10.3k6 gold badges36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

A. Wolff Over a year ago

You mean toggle event instead: api.jquery.com/toggle-event anyway, this has been removed from jquery

A. Wolff Over a year ago

My bad, ya using toggle instead of animating using fade/slide, sorry

user3012839 Over a year ago

Although it makes perfect sense, with this code the slider/accordeon wont open any tab.

Taylan Aydinli Over a year ago

Please take a look at my answer. I fixed it so the 'more' links work.

user3012839 Over a year ago

Thank you so much for your help on this matter, the problem is when you click another "tab" it wont close the one that is open in the first place, lets say i click "tab A" then when i click "tab C" both stay open.

|

Taylan Aydinli · Accepted Answer · 2013-11-20 14:45:59Z

Take a look at this. @Alex's answer is good but ignores the first click, and doesn't close the open elements when a closed element is clicked. FIDDLE. In this version, the more links in the accordion elements also work.

$(function() {
     $('#accordion li').click(function() {
         var $this = $(this);

         if (!$this.hasClass('open')) {
             // open clicked accordion element
             $this.stop().animate({'width':'480px'},500);
             $('.heading',$this).stop(true,true).fadeOut();
             $('.bgDescription',$this).stop(true,true).slideDown(500);
             $('.description',$this).stop(true,true).fadeIn();

             // close other open accordion element
             $("#accordion li.open").stop().animate({'width':'115px'},1000);
             $("#accordion li.open .heading").stop(true, true).fadeIn();
             $("#accordion li.open .description, #accordion li.open .bgDescription").stop(true, true).fadeOut();
             $("#accordion li.open").removeClass("open");
             $this.addClass('open');
         }
         else {
             // close this accordion element
             $this.stop().animate({'width':'115px'},1000);
             $('.heading',$this).stop(true,true).fadeIn();
             $('.description',$this).stop(true,true).fadeOut(500);
             $('.bgDescription',$this).stop(true,true).slideUp(700);
             $this.removeClass('open');
         }
     });

     $('#accordion > li a').click(function(e){
         e.stopPropagation();
     });
 });

Collectives™ on Stack Overflow

Jquery on click instead of hover

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related