Databases
StackOverflow2013
Postsdbo
POZurb Foundation Accordion - Don't collapse inactive segments
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POZurb Foundation Accordion - Don't collapse inactive segments
    text
    copied!<p>I'm using the Foundation 3 Accordion: <a href="http://foundation.zurb.com/old-docs/f3/elements.php#accordion" rel="nofollow">http://foundation.zurb.com/old-docs/f3/elements.php#accordion</a></p> <p>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.</p> <p>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.</p> <pre><code>;(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') &amp;&amp; !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 ); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload