#1 provide an openAll method

README.md

@@ -137,10 +137,11 @@ The `Accordion` constructor returns 4 methods:
 * `mount()` - start the magic
 * `unmount()` - unbind keyboard and mouse events
 * `on( event, callback )` - bind a callback to either the `show` or `hide` event triggered when changing panel. Both `header` and `panel` HTMLElement are passed on the callback
-* `off( event, callback )` - unbind a callback to either the `show` or `hide` event triggered when changing panel.
-Both `header` and `panel` HTMLElement are passed on the callback
-* `closeAll()` - Close all currently opened panels (will trigger a `close` event on each opened panel).
-* `close( panel )` - Close a panel. Panel is an `HTMLElement` representing the panel. It will trigger a `close` event on the panel.
+* `off( event, callback )` - unbind a callback to either the `show` or `hide` event triggered when changing panel
+* `closeAll()` - Close all currently opened panels (will trigger a `hide` event on each opened panel).
+* `close( panel )` - Close a panel. `panel` is an `HTMLElement` representing the panel. It will trigger a `hide` event on the panel.
+* `openAll()` - Open all panels (will trigger a `show` event on each opened panel).
+* `open( panel )` - Open a panel. `panel` is an `HTMLElement` representing the panel. It will trigger a `show` event on the panel.
 
 ## Properties
 

lib/index.js

@@ -394,6 +394,23 @@ class Accordion{
     this._callbacks[ event ].push( callback );
   }
 
+  openAll(){
+    if( !this.multiselectable ){
+      return;
+    }
+
+    this._accordion.panels.forEach(( panel, index ) => {
+      this._toggleDisplay( index, true );
+    });
+  }
+
+  open( panel ){
+    const index = this._accordion.panels.indexOf( panel );
+
+    this._toggleDisplay( index, true );
+  }
+
+
   /**
    * Returns an array of opened panels
    */

test/accordion.html

@@ -188,13 +188,15 @@ <h3 class="tab">
 
       var accordeons = Array.from( document.querySelectorAll( '[data-role="accordion"]' ));
 
-      accordeons.forEach( function( accordeon ){
+      window.accordeons = accordeons.map( function( accordeon ){
         var accordion = new window.Accordion( accordeon );
 
         accordion.on( 'show', open );
         accordion.on( 'hide', close );
 
         accordion.mount();
+
+        return accordion;
       });
     </script>
   </body>

test/accordion.js

@@ -311,3 +311,56 @@ test( 'Callbacks', async t => {
 
   t.end();
 });
+
+
+test( 'Open All', async t => {
+
+  const [ browser, page ] = await createBrowser();
+
+  const [ openHeaders, openPanels ] = await page.evaluate(() => {
+    window.accordeons[ 0 ].openAll();
+
+
+    const header = document.querySelectorAll( '[aria-controls][aria-expanded="true"]' );
+    const panel = document.querySelectorAll( '.panel[aria-hidden="false"]' );
+
+
+    return [
+      header.length,
+      panel.length
+    ];
+  });
+
+  t.true( openHeaders === 4 && openPanels === 4, 'La méthode « openAll » ouvre tous les panneaux' );
+
+  await browser.close();
+
+  t.end();
+});
+
+
+test( 'Close All', async t => {
+
+  const [ browser, page ] = await createBrowser();
+
+  const [ closedHeaders, closedPanels ] = await page.evaluate(() => {
+    window.accordeons[ 0 ].openAll();
+
+    window.accordeons[ 0 ].closeAll();
+
+    const header = document.querySelectorAll( '[data-multiselectable="true"] [aria-controls][aria-expanded="false"]' );
+    const panel = document.querySelectorAll( '[data-multiselectable="true"] .panel[aria-hidden="true"]' );
+
+
+    return [
+      header.length,
+      panel.length
+    ];
+  });
+
+  t.true( closedHeaders === 4 && closedPanels === 4, 'La méthode « openAll » ouvre tous les panneaux' );
+
+  await browser.close();
+
+  t.end();
+});