v2.0.0 – Allow any accordion item to be expanded by default (#22)

* Allow any accordion item to be expanded by default * Allow any accordion item to be expanded by default - bump version etc. * Remove, now redundant, data-toggle-first-section-expanded attribute * Update CHANGELOG.md * Actually remove support for data-toggle-first-section-expanded attribute
justeat · Dec 20, 2019 · ed4e7b0 · ed4e7b0
1 parent b8ea80d
commit ed4e7b0
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v2.0.0
+------------------------------
+*December 20 2019*
+
+### Added
+- Added possibility to configure which accordion section is expanded by default (`data-toggle-section-expanded` attribute)
+
+### Removed
+- Removed possibility to configure whether only first accordion section is expanded by default (`data-toggle-first-section-expanded` attribute)
+
+
 v1.1.0
 ------------------------------
 *August 21, 2018*

diff --git a/README.md b/README.md
@@ -97,10 +97,10 @@ In this instance you are then able to add `data-toggle-class` to the parent, as
 </div>
 ```
 
-To expand first accordion section by default add `data-toggle-first-section-expanded` attribute to the parent element.
+To expand accordion section by default add `data-toggle-section-expanded` attribute value to the parent element.
 
 ```html
-<div data-toggle-accordion data-toggle-first-section-expanded data-toggle-class="is-hidden">
+<div data-toggle-accordion data-toggle-section-expanded="two" data-toggle-class="is-hidden">
     <button data-toggle-target="one"></button>
     <div data-toggle-name="one"></div>
     <button data-toggle-target="two"></button>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-toggle",
   "description": "Fozzie vanilla JS toggle library.",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "files": [
     "dist"

diff --git a/src/index.js b/src/index.js
@@ -45,17 +45,17 @@ const onKeydown = (event, bindToggleBehaviour, accordion, accordionExclude) => {
 
 const setupToggle = () => {
     /**
-     * If accordion, display first section on initialisation based on "data-toggle-first-section-expanded" attribute presence
+     * If accordion, display first section on initialisation based on "data-toggle-section-expanded" attribute presence
      */
 
     $('[data-toggle-accordion]')
         .forEach(accordion => {
             const toggleClass = accordion.getAttribute('data-toggle-class') || 'is-hidden';
-            const isFirstSectionExpanded = accordion.hasAttribute('data-toggle-first-section-expanded');
+            const sectionExpanded = accordion.getAttribute('data-toggle-section-expanded');
 
             $('[data-toggle-name]', accordion)
                 .filter(toggle => !toggle.hasAttribute('data-toggle-accordion-exclude'))
-                .slice(isFirstSectionExpanded ? 1 : 0)
+                .filter(toggle => sectionExpanded !== toggle.getAttribute('data-toggle-name'))
                 .forEach(toggles(toggleClass).hide);
         });
 

diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`setupToggle accordion should display only the first item on initialisation 1`] = `
+exports[`setupToggle accordion should display only the expanded item on initialisation 1`] = `
 "
-            <div data-toggle-accordion=\\"\\" data-toggle-first-section-expanded=\\"\\">
-                <div data-toggle-name=\\"one\\"></div>
+            <div data-toggle-accordion=\\"\\" data-toggle-section-expanded=\\"two\\">
+                <div data-toggle-name=\\"one\\" class=\\"is-hidden\\"></div>
                 <button data-toggle-target=\\"one\\"></button>
-                <div data-toggle-name=\\"two\\" class=\\"is-hidden\\"></div>
+                <div data-toggle-name=\\"two\\"></div>
                 <button data-toggle-target=\\"two\\"></button>
             </div>
         "

diff --git a/test/index.test.js b/test/index.test.js
@@ -297,10 +297,10 @@ describe('setupToggle', () => {
     });
 
     describe('accordion', () => {
-        it('should display only the first item on initialisation', () => {
+        it('should display only the expanded item on initialisation', () => {
             // Arrange
             TestUtils.setBodyHtml(`
-            <div data-toggle-accordion data-toggle-first-section-expanded>
+            <div data-toggle-accordion data-toggle-section-expanded="two">
                 <div data-toggle-name="one"></div>
                 <button data-toggle-target="one"></button>
                 <div data-toggle-name="two"></div>
@@ -540,7 +540,7 @@ describe('setupToggle', () => {
         it('should not focus on the next section when pressing \'tab\' and the current section is visible', () => {
             // Arrange
             TestUtils.setBodyHtml(`
-                <div data-toggle-accordion data-toggle-first-section-expanded>
+                <div data-toggle-accordion data-toggle-section-expanded="one">
                     <div data-toggle-name="one">
                         <button data-toggle-target="one"></button>
                         <input name="one" />
@@ -600,7 +600,7 @@ describe('setupToggle', () => {
         it('should not focus on the previous section when pressing \'shift\' & \'tab\' and the previous section is visible', () => {
             // Arrange
             TestUtils.setBodyHtml(`
-                <div data-toggle-accordion data-toggle-first-section-expanded>
+                <div data-toggle-accordion data-toggle-section-expanded="one">
                     <div data-toggle-name="one">
                         <button data-toggle-target="one"></button>
                         <input name="one" />