jquery accordion content not hiding on second click

Question

I have a jQuery accordion script which works as I wanted it to.

But, ideally If you want to close the opened content, it should be on the second click.

Like bootstrap accordion here. And I am not using this because my menu is dynamic and has only one 'ID' (if you are wondering why I don't use this).

But, my script does not close the opened content as above example.

JSfiddle Link

Any suggestions to make this working as smooth as bootstrap accordion ?

My HTML :

 <div id="wrapper">
    <div class="accordionButton">monday</div>
    <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
    <div class="accordionButton">tuesday</div>
    <div class="accordionContent">sunny<br /><br /><br /><br /><br />more weather</div>
    <div class="accordionButton">wednesday</div>
    <div class="accordionContent">sunny<br />more weather</div>
    <div class="accordionButton">thursday</div>
    <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
</div>

Javascript:

 $(document).ready(function() {

//ACCORDION BUTTON ACTION   
$('div.accordionButton').click(function() {
    $('div.accordionContent').slideUp('normal');    
    $(this).next().slideDown('normal');
});

//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();

 });

Any help would be appreciated.

Answer 1

You can try to expand only if hidden

     if(!$(this).next().is(':visible'))
    {
        $(this).next().slideDown('normal');
    }

Try here

Answer 2

I changed the attached fiddle check this..JSFiddle

I changed the script as follow.

$('div.accordionButton').click(function() {
    if($(this).hasClass("expanded")){
    $(this).next().slideUp('normal');
        $(this).removeClass('expanded');
    }
    else{
    $(this).addClass("expanded");
    //$('div.accordionContent').slideUp('normal');  
    $(this).next().slideDown('normal');
    }
});

//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();

});

Answer 3

Try this, it will provide you Expand All/Collapse all functionality also.

URL: http://accordion-cd.blogspot.com/

Answer 4

This is the lightest version I could think of:

$(document).ready(function() {
$('.accordionButton').click(function(){
    $('.accordionContent').slideUp(300);
    if(!$(this).next('.accordionContent').is(':visible')) {                  
        $(this).next('.accordionContent').slideDown(300);
    }
}); });

Answer 5

This will work

$(document).ready(function() {

//ACCORDION BUTTON ACTION   
$('div.accordionButton').click(function() {
    $('div.accordionContent').removeClass('active').addClass('inactive');      
    $(this).next().removeClass('inactive').addClass('active').slideDown('normal');
    $('div.inactive').slideUp('normal');

}); 
//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();

});

here is the fiddle jsfiddle.net/wTLLP/

Answer 6

Added data attributes to check the conditions.

$(document).ready(function() {

    //ACCORDION BUTTON ACTION   
    $('div.accordionButton').click(function() {
        if($(this).data("slided") === true) {
            $(this).next().slideUp('normal');
            $(this).data("slided", false);
        } else {
            $('div.accordionContent').slideUp('normal');    
            $(this).next().slideDown('normal');
            $(this).data("slided", true);
        }
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();

});

Demo - JSFIDDLE