How do you animate the opening and closing of accordion sections in Zurb Foundation 4? - accordion

Question

How do you animate the opening and closing of accordion sections in Zurb Foundation 4?
I've done extensive searching on Zurb Foundation's Google group and couldn't find any answers there either.

Answer 1

I wrote a fairly simple jQuery plugin to get this working. The plugin has default options, while also allowing overrides via the data-options attribute.
Tested on Foundation 5.
Here's the plugin:
(function($) {
$.fn.accordionAnimated = function() {
var
$accordion = this,
$items = $accordion.find('> dd'),
$targets = $items.find('.content'),
options = {
active_class : 'active', // class for items when active
multi_expand: false, // whether mutliple items can expand
speed : 500, // speed of animation
toggleable: true // setting to false only closes accordion panels when another is opened
}
;
$.extend(options, Foundation.utils.data_options($accordion));
$items.each(function(i) {
$(this).find('a:eq(0)').on('click.accordion', function() {
if(!options.toggleable && $items.eq(0).hasClass(options.active_class)) {
return;
}
$targets.eq(i)
.stop(true, true)
.slideToggle(options.speed);
if(!options.multi_expand) {
$targets.not(':eq('+i+')')
.stop(true, true)
.slideUp(options.speed);
}
});
});
};
}(jQuery));
and the plugin is simply invoked via
$('.accordion').accordionAnimated();
Hope this helps someone.

Answer 2

Assuming you're using Foundation's HTML classes:
.top-bar-section {
-webkit-transition: 0.2s all ease-in;
-moz-transition: 0.2s all ease-in;
-o-transition: 0.2s all ease-in;
transition: 0.2s all ease-in;
}