alexyz

Out of the box there is no animation on these.  I tried for a CSS3 transition but couldn’t get one. If anyone finds one do tell. Anyhow, my current project has 3 accordion levels, the main off-canvas accordion, a second one loaded dynamically via AJAX into the main content area, and third level of accordions nested in each of the 2nd level accordions.

First, I gave them each an id, so that I could address them easily and individually:

<dl class=”accordion firstLevelAccordions” data-accordion> (in the ‘off-canvas’ left)

<dl class=’accordion secondLevelAccordions’ data-accordion> (in the main content right section, content thereof loaded dynamically via AJAX)

<dl class=’accordion thirdLevelAccordions’ data-accordion> (this one nested inside the secondLevelAccordions)

After the dynamic content load, Foundation makes you reflow to find/activate the new content:

$(document).foundation(‘reflow’);

The initialization of each accordion (you could merge these into one function, or parameter-ize the class piece, but for simplicity’s sake, this works just fine):

$(function(){ // onready

// first level off-canvas menu accordions
$(document).on(“click”, “.firstLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.firstLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.firstLevelAccordions > dd.active > a”, function (event) {
$(“.firstLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

// second level article list/detail accordions
$(document).on(“click”, “.secondLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.secondLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.secondLevelAccordions > dd.active > a”, function (event) {
$(“.secondLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

// third level nested accordions
$(document).on(“click”, “.thirdLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.thirdLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.thirdLevelAccordions > dd.active > a”, function (event) {
$(“.thirdLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

});