Foundation 6 Multiple Accordions, how to have only one accordion expanded at once

Question

I am using Foundation 6's Accordion feature and have three separate accordions on one page. By default, within a single accordion, you can only have one content expanded at a time. However, I want to have only one content open at a time for all accordions on the entire page.

I'm pretty sure I can accomplish this using their methods, specifically the "Up" method, however I cannot find any working examples and their documentation is pretty sparse. This is all they provide:

up

$('#element').foundation('up', $target);

Closes the tab defined by $target.

http://foundation.zurb.com/sites/docs/accordion.html

I am not really sure where to go from here.. so far this is what I have:

JS:

$(".accordion-title").click(function(e) {
  //Not sure what to do with this 
  $('#element').foundation('up', $target);
});

HAML:

  %ul.accordion#accordion-1{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
      %li.accordion-item
        %a.accordion-title
          Title 1
        .accordion-content{:'data-tab-content' => ""}
          Content 1
      %li.accordion-item
        %a.accordion-title
          Title 2
        .accordion-content{:'data-tab-content' => ""}
          Content 2

  %ul.accordion#accordion-2{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
      %li.accordion-item
        %a.accordion-title
          Title 1
        .accordion-content{:'data-tab-content' => ""}
          Content 1
      %li.accordion-item
        %a.accordion-title
          Title 2
        .accordion-content{:'data-tab-content' => ""}
          Content 2

  %ul.accordion#accordion-3{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
      %li.accordion-item
        %a.accordion-title
          Title 1
        .accordion-content{:'data-tab-content' => ""}
          Content 1
      %li.accordion-item
        %a.accordion-title
          Title 2
        .accordion-content{:'data-tab-content' => ""}
          Content 2

Are you initializing each accordion individually, or all at once? — Yass, Feb 29 '16 at 21:01

alexandraleigh · Answer 1 · 2016-03-02T00:37:49.310

4

I found the solution to my question in case anyone else is stuck:

$(".accordion-title").click(function(e) {
  $('.accordion').foundation('up', $('.accordion .accordion-item.is-active .accordion-content'));
});

edited Mar 02 '16 at 00:37

answered Mar 01 '16 at 17:50

alexandraleigh

187
1
14

score 1 · Accepted Answer · answered Mar 10 '16 at 10:35

I couldn't get alexandraleigh's answer to work, it was also closing the accordion I had just clicked to open.

The following is what I wrote in the end. It works on accordions set with either data-multi-expand="true" or data-multi-expand="false"

 /**
 * on accordion section click
 */
$('.accordion-title').on('mouseup', function (e) {

    var $accordionItem = $(this).parent(),
            //is the section hidden? if the section is not yet visible, the click is to open it
            opening = ($accordionItem.find('.accordion-content:hidden').length === 1);
    //
    if (opening) {
        //the accordion that has just been clicked
        var $currentAccordion = $accordionItem.parent();

        //close all other accodions
        $('.accordion').each(function () {
            var $acc = $(this);

            //ignore the accordion that was just clicked
            if ($acc[0] !== $currentAccordion[0]) {
                //find any open sections
                var $openSections = $acc.find('.accordion-item.is-active .accordion-content');
                //
                $openSections.each(function (i, section) {
                    //close them
                    $acc.foundation('up', $(section));
                });
            }
        });
    }
});

score 1 · Answer 3 · answered Feb 01 '17 at 13:37

I couldn't get r8n5n's answer to work - perhaps because of Foundation's updates since. But I managed to get it working with the following on v6.3.0..

jQuery('.accordion-title').on('mouseup', function (e) {

    jQuery('.accordion').each(function () {

        jQuery(this).foundation('up', jQuery('.accordion-content'));

    });     
});

score 0 · Answer 4 · answered Apr 27 '20 at 07:57

I had some minds on a previous answers

if you have 2 accordion just add classname to them. For example class="accordion accordion-first" and class="accordion accordion-second".

//close active item on second accordion when click on first accordion
$(".accordion-first .accordion-title").click(function(e) {
  $('.accordion').foundation('up', $('.accordion-second .accordion-item.is-active .accordion-content'));
});

//close active item on first accordion when click on second accordion
$(".accordion-second .accordion-title").click(function(e) {
  $('.accordion').foundation('up', $('.accordion-first .accordion-item.is-active .accordion-content'));
});

Foundation 6 Multiple Accordions, how to have only one accordion expanded at once

4 Answers4