CODEWITHSUNDEEP
accordionzurb-foundationanimated
Trinity
Trinity

Reputation: 87

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

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.

Upvotes: 0

Views: 2701

Answers (2)

gamma
gamma

Reputation: 61

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.

Upvotes: 2

Shawn Erquhart
Shawn Erquhart

Reputation: 1858

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; 
}

Upvotes: -1

Related Questions