CODEWITHSUNDEEP
javascriptjquery
user3012839
user3012839

Reputation: 23

Jquery on click instead of hover

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.

Upvotes: 2

Views: 119

Answers (2)

Taylan Aydinli
Taylan Aydinli

Reputation: 4363

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

Upvotes: 0

Alex
Alex

Reputation: 10216

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');
        }
    });
});

Upvotes: 1

Related Questions