Menu icon Foundation

My Posts

No Content

My Comments

Wayne Theisinger commented on Nick Caldwell's post over 4 years

Also there isn't a great deal of point allowing users to change the class names using mixins:

.your-accordion-class  {
  @include accordion-container;

  .your-accordion-navigation-class  {
    @include accordion-navigation;
  }

  .your-accordion-content-class  {
    @include accordion-content;
  }
}

Unless your javascript handles it:

Below is the edited javascript to enable the changing of classes in settings:

 ;(function ($, window, document, undefined) {
  'use strict';

  Foundation.libs.accordion = {
    name : 'accordion',

    version : '5.4.7',

    settings : {
      accordion_class: 'accordion',
      navigation_class: 'accordion-navigation',
      content_class: 'content',
      active_class: 'active',
      multi_expand: false,
      toggleable: true,
      callback : function () {}
    },

    init : function (scope, method, options) {
      this.bindings(method, options);
    },

    events : function () {
      var self = this;
      var S = this.S;
      S(this.scope)
      .off('.fndtn.accordion')
      .on('click.fndtn.accordion', '[' + this.attr_name() + '] > .' + self.settings.navigation_class + ' > a', function (e) {
        var accordion = S(this).closest('[' + self.attr_name() + ']'),
            groupSelector = self.attr_name() + '=' + accordion.attr(self.attr_name()),
            settings = accordion.data(self.attr_name(true) + '-init') || self.settings,
            target = S('#' + this.href.split('#')[1]),
            aunts = $('> .'+settings.navigation_class, accordion),
            siblings = aunts.children('.'+settings.content_class),
            active_content = siblings.filter('.' + settings.active_class);

        e.preventDefault();

        if (accordion.attr(self.attr_name())) {
          siblings = siblings.add('[' + groupSelector + '] .' + self.settings.navigation_class + ' > .' + self.settings.content_class);
          aunts = aunts.add('[' + groupSelector + '] .' + self.settings.navigation_class);
        }

        if (settings.toggleable && target.is(active_content)) {
          target.parent('.'+self.settings.navigation_class).toggleClass(settings.active_class, false);
          target.toggleClass(settings.active_class, false);
          settings.callback(target);
          target.triggerHandler('toggled', [accordion]);
          accordion.triggerHandler('toggled', [target]);
          return;
        }

        if (!settings.multi_expand) {
          siblings.removeClass(settings.active_class);
          aunts.removeClass(settings.active_class);
        }

        target.addClass(settings.active_class).parent().addClass(settings.active_class);
        settings.callback(target);
        target.triggerHandler('toggled', [accordion]);
        accordion.triggerHandler('toggled', [target]);
      });
    },

    off : function () {},

    reflow : function () {}
  };
}(jQuery, window, window.document));

Which can be set with:

 jQuery(document).foundation({
    accordion: {
    accordion_class: 'your-accordion-class',
    navigation_class: 'your-accordion-navigation-class',
    content_class: 'your-content-class',
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: false,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
    }
});

The difference being the addition of navigation_class and the adding content_class into the javascript where it had been missed.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Nick Caldwell's post over 4 years

Also there isn't a great deal of point allowing users to change the class names using mixins:

.your-accordion-class  {
  @include accordion-container;

  .your-accordion-navigation-class  {
    @include accordion-navigation;
  }

  .your-accordion-content-class  {
    @include accordion-content;
  }
}

Unless your javascript handles it:

Below is the edited javascript to enable the changing of classes in settings:

 ;(function ($, window, document, undefined) {
  'use strict';

  Foundation.libs.accordion = {
    name : 'accordion',

    version : '5.4.7',

    settings : {
      accordion_class: 'accordion',
      navigation_class: 'accordion-navigation',
      content_class: 'content',
      active_class: 'active',
      multi_expand: false,
      toggleable: true,
      callback : function () {}
    },

    init : function (scope, method, options) {
      this.bindings(method, options);
    },

    events : function () {
      var self = this;
      var S = this.S;
      S(this.scope)
      .off('.fndtn.accordion')
      .on('click.fndtn.accordion', '[' + this.attr_name() + '] > .' + self.settings.navigation_class + ' > a', function (e) {
        var accordion = S(this).closest('[' + self.attr_name() + ']'),
            groupSelector = self.attr_name() + '=' + accordion.attr(self.attr_name()),
            settings = accordion.data(self.attr_name(true) + '-init') || self.settings,
            target = S('#' + this.href.split('#')[1]),
            aunts = $('> .'+settings.navigation_class, accordion),
            siblings = aunts.children('.'+settings.content_class),
            active_content = siblings.filter('.' + settings.active_class);

        e.preventDefault();

        if (accordion.attr(self.attr_name())) {
          siblings = siblings.add('[' + groupSelector + '] .' + self.settings.navigation_class + ' > .' + self.settings.content_class);
          aunts = aunts.add('[' + groupSelector + '] .' + self.settings.navigation_class);
        }

        if (settings.toggleable && target.is(active_content)) {
          target.parent('.'+self.settings.navigation_class).toggleClass(settings.active_class, false);
          target.toggleClass(settings.active_class, false);
          settings.callback(target);
          target.triggerHandler('toggled', [accordion]);
          accordion.triggerHandler('toggled', [target]);
          return;
        }

        if (!settings.multi_expand) {
          siblings.removeClass(settings.active_class);
          aunts.removeClass(settings.active_class);
        }

        target.addClass(settings.active_class).parent().addClass(settings.active_class);
        settings.callback(target);
        target.triggerHandler('toggled', [accordion]);
        accordion.triggerHandler('toggled', [target]);
      });
    },

    off : function () {},

    reflow : function () {}
  };
}(jQuery, window, window.document));

Which can be set with:

 jQuery(document).foundation({
    accordion: {
    accordion_class: 'your-accordion-class',
    navigation_class: 'your-accordion-navigation-class',
    content_class: 'your-content-class',
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: false,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
    }
});

The difference being the addition of navigation_class and the adding content_class into the javascript where it had been missed.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content