CODEWITHSUNDEEP
jqueryhtmlcssresponsive-designzurb-foundation
lauharkness
lauharkness

Reputation: 71

Zurb Foundation Accordion Nested Inside Accordion

I'm using Zurb Foundation for a responsive website. I'd like to get an accordion nested inside an 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>

Looks like with this setup, when the parent accordion panel is opened, the subsequent children accordion panels are opened (or at least some flag is set to open because the arrows are pointing down like the open parent) and the child accordion functionality breaks. I could probably add a jQuery UI accordion inside the Foundation parent accordion, but it wouldn't be responsive like the parent and thus might defeat the purpose of using Foundation in the first place.

Has anyone successfully accomplished this?

Upvotes: 7

Views: 4380

Answers (2)

Mario Bellart
Mario Bellart

Reputation: 504

You just have to stop the click event progation over the accordion items, then, if you click in a child accordion item, child click event won't close the parent item.

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

the modified code, please, take a look on 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 );

Upvotes: 1

Erich Quist
Erich Quist

Reputation: 1

I was having this issue. The accordions would work, but the arrow indicator and styling were as if each child accordion were open. This is a CSS "bug" that you can fix by adding an additional child selector to lines 715 and 716 of foundation.css:

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; }

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

Upvotes: 0

Related Questions