diff --git a/h5p-accordion.js b/h5p-accordion.js index 4352dfc..fb65ca9 100644 --- a/h5p-accordion.js +++ b/h5p-accordion.js @@ -24,6 +24,8 @@ H5P.Accordion = (function ($) { // Set default behavior. this.params = $.extend({}, { hTag: "h2", + expandCollapseOption: "collapsedAll", + multipleAccordionsOpen: "openOne", panels: [] }, params); @@ -64,12 +66,10 @@ H5P.Accordion = (function ($) { self.$content.appendTo( // Use container as tabpanel $container.html('') - .addClass('h5p-accordion') + .addClass("h5p-accordion " + this.params.expandCollapseOption) .attr({ 'role': 'tablist', - 'aria-multiselectable': 'false' - // Must be changed if we ever allow more tab to be open - // at the same time + 'aria-multiselectable': (this.params.multipleAccordionsOpen === "openOne" ? 'false' : 'true'), }) ); }; @@ -82,28 +82,76 @@ H5P.Accordion = (function ($) { var self = this; var titleId = 'h5p-panel-link-' + this.idPrefix + id; var contentId = 'h5p-panel-content-' + self.idPrefix + id; + var expandCollapseOption = this.params.expandCollapseOption; + var multipleAccordionsOpen = this.params.multipleAccordionsOpen; + var titleAriaExpanded, titleAriaExpandedFirst, titlePanelExpanded, titlePanelExpandedFirst, + panelAriaHidden, panelAriaHiddenFirst, panelStyleDisplay, panelStyleDisplayFirst; var toggleCollapse = function () { - if (self.$expandedTitle === undefined || !self.$expandedTitle.is($title)) { - self.collapseExpandedPanels(); - self.expandPanel($title, $content); + // Check if the panel is already expanded. + if ($(this).hasClass("h5p-panel-expanded")) { + // It is expanded, so collapse it. + self.collapsePanel($title, $content); } else { - self.collapsePanel($title, $content); + // Check if you should close all other panels before opening this one. + if (multipleAccordionsOpen === 'openOne') { + self.collapseExpandedPanels(); + } + // The panel is collapsed, so expand it. + self.expandPanel($title, $content); } // We're running in an iframe, so we must animate the iframe height self.animateResize(); }; + + // Switch for expandCollapseOption + switch (expandCollapseOption) { + case 'collapsedAll': { + titleAriaExpanded = true; + titleAriaExpandedFirst = titleAriaExpanded; + titlePanelExpanded = ""; + titlePanelExpandedFirst = titlePanelExpanded; + panelAriaHidden = true; + panelAriaHiddenFirst = panelAriaHidden; + panelStyleDisplay = ""; + panelStyleDisplayFirst = panelStyleDisplay; + break; + } + case 'expandedAll': { + titleAriaExpanded = true; + titleAriaExpandedFirst = titleAriaExpanded; + titlePanelExpanded = "h5p-panel-expanded"; + titlePanelExpandedFirst = titlePanelExpanded; + panelAriaHidden = false; + panelAriaHiddenFirst = panelAriaHidden; + panelStyleDisplay = "display: block;"; + panelStyleDisplayFirst = panelStyleDisplay; + break; + } + case 'expandedFirstOnly': { + titleAriaExpanded = false; + titleAriaExpandedFirst = true; + titlePanelExpanded = ""; + titlePanelExpandedFirst = "h5p-panel-expanded"; + panelAriaHidden = true; + panelAriaHiddenFirst = false; + panelStyleDisplay = ""; + panelStyleDisplayFirst = "display: block;"; + break; + } + + } // Create panel title var $title = $('<' + this.params.hTag + '/>', { 'id': titleId, - 'class': 'h5p-panel-title', + 'class': 'h5p-panel-title ' + (id === 0 ? titlePanelExpandedFirst : titlePanelExpanded), 'role': 'tab', 'tabindex': (id === 0 ? '0' : '-1'), 'aria-selected': (id === 0 ? 'true' : 'false'), - 'aria-expanded': 'false', + 'aria-expanded': (id === 0 ? titleAriaExpandedFirst : titleAriaExpanded), 'aria-controls': contentId, 'html': self.params.panels[id].title, 'on': { @@ -158,7 +206,8 @@ H5P.Accordion = (function ($) { 'class': 'h5p-panel-content', 'role': 'tabpanel', 'aria-labelledby': titleId, - 'aria-hidden': 'true' + 'aria-hidden': (id === 0 ? panelAriaHiddenFirst : panelAriaHidden), + 'style': (id === 0 ? panelStyleDisplayFirst : panelStyleDisplay), }); // Add the content itself to the content section diff --git a/semantics.json b/semantics.json index 22f3f34..3840940 100644 --- a/semantics.json +++ b/semantics.json @@ -33,6 +33,44 @@ } }, { + "name": "expandCollapseOption", + "type": "select", + "label": "Accordion expand/collapse option", + "description": "Choose the default option for your accordion.", + "options": [ + { + "value": "collapsedAll", + "label": "All panels collapsed" + }, + { + "value": "expandedAll", + "label": "All panels expanded" + }, + { + "value": "expandedFirstOnly", + "label": "Only first panel expanded" + } + ], + "default": "collapsedAll" + }, + { + "name": "multipleAccordionsOpen", + "type": "select", + "label": "Should multiple accordions be open at once?", + "description": "Choose if you want to have multiple accordions open or just one open at a time.", + "options": [ + { + "value": "openOne", + "label": "One accordion open at a time" + }, + { + "value": "openMultiple", + "label": "Multiple accordions open at a time" + } + ], + "default": "openOne" + }, + { "name": "hTag", "type": "select", "label": "H tags for labels (does not affect the size of the label)",