Accordion Opens But Won't Close

Question

I am using Foundation Accordion and I added a script to have smooth opening and closing. It works but the problem is if you have only one panel you can open it but not close it.

Here is the code used:

$(".accordion").on("click", "dd:not(.active)", function (event) {
    $("dd.active").removeClass('active').find(".content").slideUp("slow");
    $(this).addClass('active').find(".content").slideToggle("slow");
}); 

I tried this code but it didn't work:

$("dd.active").on("click", function (event) {
    $("dd.active").removeClass('active').find(".content").slideUp("slow");
});

How do I get this to close smoothly?

Here is a jsFiddle

Note: Open the Panel then Try to Close It.

Answer 1

Remove href from <dd><a> .

JS:

$(function () {
    $(".accordion").on("click", "dd", function (event) {
        if (!($(this).hasClass("active"))) {
            $("dd.active").removeClass('active').find(".content").slideUp("fast");            
        }
        $(this).toggleClass('active').find(".content").slideToggle("fast");
    })
});

Updated fiddle here.