CODEWITHSUNDEEP
jqueryaccordionzurb-foundation
artmem
artmem

Reputation: 367

Zurb Foundation Accordion - Don't collapse inactive segments

I'm using the Foundation 3 Accordion: http://foundation.zurb.com/old-docs/f3/elements.php#accordion

The default behavior is that when you click a tab to expand a section, the previously expanded section collapses. I'd like to override that, so that the page loads with the first section expanded, and then when you expand additional segments, they all stay open. Basically, I want to disable collapsing the segments entirely.

Here's the relevant js. I tried just replacing all of the "removeClass('active')" parts with "removeClass('inactive') but it didn't seem to do anything.

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

  $.fn.foundationAccordion = function (options) {

// DRY up the logic used to determine if the event logic should execute.
var hasHover = function(accordion) {
  return accordion.hasClass('hover') && !Modernizr.touch
};

$(document).on('mouseenter', '.accordion li', function () {
    var p = $(this).parent();

    if (hasHover(p)) {
      var flyout = $(this).children('.content').first();

      $('.content', p).not(flyout).hide().parent('li').removeClass('active');
      flyout.show(0, function () {
        flyout.parent('li').addClass('active');
      });
    }
  }
);

$(document).on('click.fndtn', '.accordion li .title', function () {
    var li = $(this).closest('li'),
        p = li.parent();

    if(!hasHover(p)) {
      var flyout = li.children('.content').first();

      if (li.hasClass('active')) {
        p.find('li').removeClass('active').end().find('.content').hide();
      } else {
        $('.content', p).not(flyout).hide().parent('li').removeClass('active');
        flyout.show(0, function () {
          flyout.parent('li').addClass('active');
        });
      }
    }
  }
 );

      };

    })( jQuery, this );

Upvotes: 3

Views: 3376

Answers (2)

Evan Rose
Evan Rose

Reputation: 104

For those who don't read documentation like myself, Foundation 5 includes this as an option: http://foundation.zurb.com/docs/components/accordion.html and scroll to "Optional Javascript Configuration."

In the settings object in foundation.accordion.js change multi_expand to "true" from the default of "false" and you'll be good to go.

settings : {
  active_class: 'active',
  //multi_expand: false,
  multi_expand: true,
  toggleable: true,
  callback : function () {}
},

Upvotes: 1

chrisjsherm
chrisjsherm

Reputation: 1329

Comment out the lines within the click listener that remove the active class from the li element. If you change your mind and want to allow the section to be closed by clicking again, only comment out the second one. See below:

$(document).on('click.fndtn', '.accordion li .title', function () {
    var li = $(this).closest('li'),
        p = li.parent();

    if(!hasHover(p)) {
      var flyout = li.children('.content').first();

      if (li.hasClass('active')) {
        //p.find('li').removeClass('active').end().find('.content').hide();
      } else {
        //$('.content', p).not(flyout).hide().parent('li').removeClass('active');
        flyout.show(0, function () {
          flyout.parent('li').addClass('active');
        });
      }
    }
  }
 );

Upvotes: 1

Related Questions