Question

I have a custom accordion script that I’m trying to adapt for another site. I need to be able to close a div after opening it, but I can’t figure out how to modify it to do so.

Here’s my script:

$(".accordionHidden").hide();

// Bind to Button click Event //
$("a.accordionHeading").bind("click", function(e){
    e.preventDefault();

    // Set New Target from Button data-target Attribute //
    var $target = $("."+$(this).data("target"));

    // Prevent Slide Up / Down of Current Content //
    if ($(".accordionHidden:visible").get(0) != $target.get(0)){

        // Slide Up Content if Visible //
        if ($(".accordionHidden:visible").length){
            $(".accordionHidden").filter(":visible").slideUp("fast", function(){
                $target.slideDown("fast");
            });
        }
        else {
            $target.slideDown("fast");
        }
    }
});

I also need to able to have multiple items open at once, not sure if this script can do this at the moment.

DEMO: http://jsfiddle.net/7W2je/2/ (added second accordion, need to have two (or more) open at once)

Answer 1

try slideToggle() method:

$(".accordionHidden").hide();

// Bind to Button click Event //
$("a.accordionHeading").bind("click", function(e){
    e.preventDefault();

    // Set New Target from Button data-target Attribute //
    $("."+$(this).data("target")).slideToggle();
    if ($("a.accordionHeading").text() == 'Maximize') {
       $("a.accordionHeading").text("Show Less Info");
       $("a.accordionHeading").removeClass("minimize").addClass('maximize');
    } else {
        $("a.accordionHeading").addClass("minimize").removeClass('maximize').text('Maximize');
    }

});

http://jsfiddle.net/7W2je/4/