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