Established Zurb Foundation Accordion Accordion

Question

I use the Zurb Foundation for a responsive website. I would like to get an accordion nested inside the accordion using the following HTML structure:

<ul class="accordion"> <li class="active"> <div class="title">First Accordion Panel Title</div> <div class="content">First Accordion Panel Content</div> </li> <li> <div class="title">Second Accordion Panel Title</div> <div class="content">Second Accordion Panel Content</div> </li> <li> <div class="title">Parent Accordion Panel Title</div> <div class="content"> <ul class="accordion"> <li class="active"> <div class="title">Child Accordion Panel Title</div> <div class="content">Child Accordion Panel Content</div> </li> ... </ul> </div> </li> </ul> 

It seems that with this setting, when the parent accordion panel is open, subsequent child accordion panels (or at least some flag is set to open because the arrows point down like an open parent element) open and the functionality of the child accordion breaks. Perhaps I could add a jQuery UI accordion inside the parent Foundation accordion, but it will not respond as a parent and thus can defeat the purpose of using Foundation in the first place.

Did it succeed?

Answer 1

You just need to stop the click event from scrolling over the elements of the accordion, then if you click on the element of the child accordion, the event of the child clicking will not close the parent element.

The modification is simple, you need to add the param event to the click handler and use event.stopPropagation (); inside st else with the activation code of the current clicked element.

modified code, please look at the code comments:

 ;(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 { //be sure to add the param event in the click function handler $('.accordion li', this).on('click.fndtn', function (event) { var li = $(this), p = $(this).parent(), flyout = $(this).children('.content').first(); if (li.hasClass('active')) { p.find('li').removeClass('active').end().find('.content').hide(); } else { //stop event propagation event.stopPropagation(); $('.content', p).not(flyout).hide().parent('li').removeClass('active'); flyout.show(0, function () { flyout.parent('li').addClass('active'); }); } }); } }; })( jQuery, this ); 

Answer 2

I had this problem. Accordions will work, but the arrow and style look as if every children's accordion was open. This is a “CSS” error that you can fix by adding an extra child selector to lines 715 and 716 from the foundation.css file:

 ul.accordion > li.active > .title { background: white; padding-top: 13px; } ul.accordion > li.active > .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: #9d9d9d transparent transparent transparent; } 

A new child selector is between li.active and .title .