Custom Accordion

Question

I have the accordion below which works but when an item is open if you click it again it re opens instead of closing.

I'm not sure of the best way to adapt the code below to achieve this?

Any help or advice would be great?

Thanks

$('.acc h2').click(function() {
    $('.acc h2.open').nextUntil('h2').stop(true, true).slideToggle();
    $('.acc h2.open').removeClass('open');
    $(this).nextUntil('h2').stop(true, true).slideToggle(900);
    $(this).toggleClass('open');
});

<div class="acc">

    <h2>1. Title 1</h2>   
    <div><p>text 1</p></div>

    <h2>2. Title 2</h2>
    <div><p>text 2</p></div>

    <h2>3.  Title 3</h2>
    <div><p>text 3</p></div>

</div><!--END acc-->

Answer 1

Solution :

$('.acc h2').next('div').hide();
$('.acc h2').click(function() {
if($(this).next('div').is(':visible'))
{
    $(this).next('div').slideUp();    
}
else{
    $('.acc h2').next('div').slideUp();
    $(this).next('div').slideToggle();
}    
});

Demos :

http://jsfiddle.net/5NAhV/1/

or

http://jsfiddle.net/5NAhV/2/

Answer 2

Problem with toggle is that when user clicks multiple times, the animation starts to queue which is a pain.

Here's an alternative:

http://jsfiddle.net/adaz/5NAhV/3/

edit:

http://jsfiddle.net/5NAhV/2/ yeah, is(":visible") does the job!