I am creating a simple accordion using jQuery, so far it looks good but it acts weird on double click or even if clicked more then twice. Instead of just closing itself it starts opening and closing depending how many times been clicked. Thought about implementing a variable, something like if(!hasbeenclicked) but not sure if that would work. So basically I wonder how to prevent it from double clicks an if clicked again on the same option, just close itself.

Here is a live demo /

My current code:

javascript

(function(){       

    $('#accordion h3').click(function(e){

        e.preventDefault();       
        $('#accordion div').slideUp();
        $(this).next('div').slideDown();                               

    });
})();

html

<div id="accordion">
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
</div>

thank you.

I am creating a simple accordion using jQuery, so far it looks good but it acts weird on double click or even if clicked more then twice. Instead of just closing itself it starts opening and closing depending how many times been clicked. Thought about implementing a variable, something like if(!hasbeenclicked) but not sure if that would work. So basically I wonder how to prevent it from double clicks an if clicked again on the same option, just close itself.

Here is a live demo http://jsfiddle/qBD5D/

My current code:

javascript

(function(){       

    $('#accordion h3').click(function(e){

        e.preventDefault();       
        $('#accordion div').slideUp();
        $(this).next('div').slideDown();                               

    });
})();

html

<div id="accordion">
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
  <h3>Accordion option text</h3>
  <div>hello world</div>
</div>

thank you.

• javascript
• jquery
• onclick
• accordion

Share Improve this question Follow asked May 4, 2012 at 7:56 devjs11devjs11 1,95888 gold badges4343 silver badges7373 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

One of the solutions can be disabling sliding already visible div:

(function(){        
    $('#accordion h3').click(function(e){                        
        e.stopImmediatePropagation();                
        e.preventDefault();        
        var div = $(this).next('div');
        if (div.is(":visible")) return;
        $('#accordion div').slideUp();
        div.slideDown();                                        
    });
})();

DEMO: http://jsfiddle/JJsb4/

UPDATE: To make the section closing on the second click, you need to swap around two lines. So the final version will be:

(function(){        
    $('#accordion h3').click(function(e){
        e.stopImmediatePropagation();     
        e.preventDefault();        
        var div = $(this).next('div');
        $('#accordion div').slideUp();  // these lines
        if (div.is(":visible")) return; // are swapped
        div.slideDown();                                        
    });
})();

You're looking for .stop() this will stop all jquery animation on the object. Fire this just before you start your animation:

(function(){       

    $('#accordion h3').click(function(e){

        e.preventDefault();       
        $('#accordion div').stop().slideUp();
        $(this).next('div').stop().slideDown();                               

    });
})();

Give that a try, should give you better feel.

If you don't like that solution though you can always have a waiting function, so you can't trigger any animation until they're done animating. They won't queue becuase they won't fire at all that way.

Update:

To have it wait before firing the next animation you've got to have a flag to say when so add a class when it begins animating, remove it when it stops. No events will queue up because you've stopped them firing at all:

(function(){           
    $('#accordion h3').click(function(e){            
        e.preventDefault();
        if ($('#accordian h3.sliding').length > 0)
            return false;

        var me = $(this);
        me.addClass('sliding');                  

        //slide up the currently shown div, no need to inefficiently 
        //fire this on all  child divs
        $('#accordion div.shown').slideUp().removeClass('shown');

        //slide the corresponding div down and add and remove the 
        //right classes when it's finished
        $(this).next('div').slideDown(500, function(){
             $(this).addClass('shown');
             me.removeClass('sliding');
        });                               

    });
})();

That aught to do it.

You might want to consider looking at the popular twitter bootstrap library.

It a time saver and has lots of feature including collapse/accordion

http://twitter.github./bootstrap/javascript.html#collapse

Hiya please see this working Demo http://jsfiddle/r9nw8/

Is this what you are looking for? Please let me know bruv!

Note: This sample will close the option on second click & further I am using slideToggle() API to do up and down.

Jquery Code

(function(){        
    $('div#accordion > h3').click(function(e){    

        e.preventDefault();  
        if($(this).next('div').is(":hidden"))
           $("#accordion > div").slideUp();

         $(this).next('div').slideToggle();          


    });
})();
​