Question

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.net/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.

Answer 1

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