Using Flexibility for MODX: Foundation's Accordian

Share this on:

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 );
	
Share this on:
Mike Nuttall

Author: Mike Nuttall

Mike has been web designing, programming and building web applications in Leeds for many years. He founded Onsitenow in 2009 and has been helping clients turn business ideas into on-line reality ever since. Mike can be followed on Twitter and has a profile on Google+.

4 comments
  1. iamrobert

    iamrobert
    Sep 26, 2013 at 05:55 PM

    This works great

  2. Christian C.

    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?

  3. Mike Nuttall

    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.

  4. Christian C.

    Christian C.
    Dec 13, 2013 at 01:55 AM

    No problem, I'm on it. Thanks!