From 6d0cab6340c31d29651ea8285f01567050d3047e Mon Sep 17 00:00:00 2001 From: Marius Olbertz Date: Wed, 28 Sep 2016 20:01:14 +0200 Subject: [PATCH] Enhanced functionality of Accordion. Click listener now only calls toggle(), which will then work the tab content up/down out on its own. --- js/foundation.accordion.js | 38 ++++++++++++++------------------------ 1 file changed, 14 insertions(+), 24 deletions(-) diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js index c45172a1d..b5f144c9c 100644 --- a/js/foundation.accordion.js +++ b/js/foundation.accordion.js @@ -76,16 +76,8 @@ class Accordion { if ($tabContent.length) { $elem.children('a').off('click.zf.accordion keydown.zf.accordion') .on('click.zf.accordion', function(e) { - // $(this).children('a').on('click.zf.accordion', function(e) { e.preventDefault(); - if ($elem.hasClass('is-active')) { - if(_this.options.allowAllClosed || $elem.siblings().hasClass('is-active')){ - _this.up($tabContent); - } - } - else { - _this.down($tabContent); - } + _this.toggle($tabContent); }).on('keydown.zf.accordion', function(e){ Foundation.Keyboard.handleKey(e, 'Accordion', { toggle: function() { @@ -115,14 +107,12 @@ class Accordion { /** * Toggles the selected content pane's open/close state. - * @param {jQuery} $target - jQuery object of the pane to toggle. + * @param {jQuery} $target - jQuery object of the pane to toggle (`.accordion-content`). * @function */ toggle($target) { if($target.parent().hasClass('is-active')) { - if(this.options.allowAllClosed || $target.parent().siblings().hasClass('is-active')){ - this.up($target); - } else { return; } + this.up($target); } else { this.down($target); } @@ -130,25 +120,25 @@ class Accordion { /** * Opens the accordion tab defined by `$target`. - * @param {jQuery} $target - Accordion pane to open. + * @param {jQuery} $target - Accordion pane to open (`.accordion-content`). * @param {Boolean} firstTime - flag to determine if reflow should happen. * @fires Accordion#down * @function */ down($target, firstTime) { - if (!this.options.multiExpand && !firstTime) { - var $currentActive = this.$element.children('.is-active').children('[data-tab-content]'); - if($currentActive.length){ - this.up($currentActive); - } - } - $target .attr('aria-hidden', false) .parent('[data-tab-content]') .addBack() .parent().addClass('is-active'); + if (!this.options.multiExpand && !firstTime) { + var $currentActive = this.$element.children('.is-active').children('[data-tab-content]'); + if ($currentActive.length) { + this.up($currentActive.not($target)); + } + } + $target.slideDown(this.options.slideSpeed, () => { /** * Fires when the tab is done opening. @@ -165,16 +155,16 @@ class Accordion { /** * Closes the tab defined by `$target`. - * @param {jQuery} $target - Accordion tab to close. + * @param {jQuery} $target - Accordion tab to close (`.accordion-content`). * @fires Accordion#up * @function */ up($target) { var $aunts = $target.parent().siblings(), _this = this; - var canClose = this.options.multiExpand ? $aunts.hasClass('is-active') : $target.parent().hasClass('is-active'); + var canClose = $aunts.hasClass('is-active'); - if(!this.options.allowAllClosed && !canClose) { + if(!this.options.allowAllClosed && !$aunts.hasClass('is-active')) { return; } -- 2.47.2