Foundation 5 Accordion - Transition Speed?

Question

I am using Foundation 5 Accordions on a Website. They work but I want to change the transition speed. Currently when you click they instantly hide one and show the other. I would prefer they transition vs instantly appearing.

I tried CSS but it didn't work:

.accordion dd > a{ 
   transition: all .5s;
}

Note: I am omitted vendor prefixes.

How do I get these to transition smoothly?

If I can do it with pure CSS this is preferred, otherwise JS will work but I am unsure how?

Answer 1

Lynda, I appreciated your code, in foundation 5, the panel stays visible after the second closing. Seems to be caused by jQuery adding style attributes from sliding. I edited it to fix the issue.

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

Answer 2

As it turns out JS is the way to do this:

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

Answer 3

You can use this structure:

$(function() {
  $(".accordion").on("click", "dd", function (event) {

   $("div.active").slideUp(100).removeClass('.active');
       $(this).find(".content").slideDown(100).addClass('active');

 })
});

Its work correctly.

Answer 4

Here's a solution that is a bit more in-depth with jQuery, as well as utilizing .eq() to specifically target only the first (position 0) a element clicked through all of the li elements. Theoretically, this should work if you add the multi_expand configuration as well, because it only targets the first a element.

$(".accordion li").on("click", "a:eq(0)", function (event) {
    var li_parent = $(this).parent();

        if (li_parent.hasClass('active')) {
            $(".accordion li div.content:visible").slideToggle("normal");
        } else {
            $(".accordion li div.content:visible").slideToggle("normal");
            $(this).parent().find(".content").slideToggle("normal");
        }
    });

Credit goes to Nemanja Andrejevic on the Foundation forums. Note: this is using the Foundation 5.5 markup. If you're using previous versions, just replace all uses of li with dd .