Using Flexibility for MODX: Foundation's Accordian
Posted by Mike Nuttall
Using and adapting Foundation's accordion controls
Flexibility is currently being updated so some of the info could be out of date. I'll update the article when the new version is available.
Flexability for MODX comes with all Zurb's Foundation widgets including the accordion. The default behaviours of this is to just show and hide the associated content without any animation. I wanted a smoother transition so I adapted the code to use jQuery's slidUp and slideDown methods. ( In the file jquery.foundation.accordion.js in folder /assets/templates/flexability/javascripts )
There's probably a good reason why they didn't to start with, maybe compatability with older browsers, but at the moment I don't know what that is.
Anyway here is my version:
;(function ($, window, undefined){ 'use strict'; $.fn.foundationAccordion = function (options) { var $accordion = $('.accordion'); if ($accordion.hasClass('hover') && !Modernizr.touch) { $('.accordion li', this).on({ mouseenter : function () { var p = $(this).parent(), flyout = $(this).children('.content').first(); $('.content', p).not(flyout).hide().parent('li').removeClass('active'); flyout.show(0, function () { flyout.parent('li').addClass('active'); }); } }); } else { $('.accordion li .title', this).on('click.fndtn', function () { var li = $(this).parent('li:first'), p = li.parent(), flyout = li.children('.content').first(); if (li.hasClass('active')) { p.find('li').removeClass('active').end().find('.content').slideUp(); } else { $('.content', p).not(flyout).slideUp(400).parent('li').removeClass('active'); flyout.slideDown(400, function () { flyout.parent('li').addClass('active'); }); } }); } }; })( jQuery, this );
iamrobert
Sep 26, 2013 at 05:55 PM
This works great
Christian C.
Dec 12, 2013 at 04:31 AM
Hey Mike, thank you for this solution.
I am using Foundation 5 and I'm looking to give my accordion smooth transitions as well. But I am very new to jQuery, I did a copy/paste of your code and it's not working. Is there something that I need to change?
Mike Nuttall
Dec 12, 2013 at 02:40 PM
Hi Christian, Sorry, I don't know, I haven't tried it with Foundation 5, and it's not on the agenda at the moment. Maybe search for a forum that is more actively using Foundation 5 now.
Christian C.
Dec 13, 2013 at 01:55 AM
No problem, I'm on it. Thanks!