# Class: Accordion

## Accordion

#### new Accordion($accordionWrapper [, userOptions])

  Accordion

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `$accordionWrapper` | HTMLElement |  |

  `userOptions`

  Object

  <optional>

  ###### Properties

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `tabSelector` | String | <optional> | 'button[aria-expanded]' |
  `allowMultipleTab` | Boolean | <optional> | false |
  `onOpenAtStart` | Accordion_callback | <optional> |  |
  `onOpen` | Accordion_callback | <optional> |  |
  `onClose` | Accordion_callback | <optional> |  |

  `animations`

  Object

  <optional>

  ###### Properties

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `open` | Accordion_animation | <optional> |
  `close` | Accordion_animation | <optional> |
  `destroy` | Accordion_animation | <optional> |

  ##### Example

      new Accordion( document.querySelector( '.accordion' ), {
           "tabSelector":     ".tab",
           "allowMultipleTab": false,
           "animations": {
               "open": function( $tab, $panel ) {
                   aClass( [ $tab, $panel ], 'on' );

                   return Promise.resolve();
               },
               "close": function( $tab, $panel ) {
                   rClass( [ $tab, $panel ], 'on' );

                   return Promise.resolve();
               },
               "destroy": function( $tab, $panel ) {
                   rClass( [ $tab, $panel ], 'on' );

                   return Promise.resolve();
               }
           },
           "onOpenAtStart": function( $tab, $panel ) {
               console.log( 'open: ', $tab, $panel );
           },
           "onOpen": function( $tab, $panel ) {
               console.log( 'open: ', $tab, $panel );
           },
           "onClose":  function( $tab, $panel ) {
               console.log( 'close: ', $tab, $panel );
           }
       } );

      HTML:

      <div class="accordion">
          <button aria-expanded="true" class="tab" aria-controls="panel-1">Button name</button>
          <div id="panel-1" class="panel">
             <p>Content</p>
          </div>

          <button aria-expanded="false" class="tab" aria-controls="panel-2">Button name</button>
          <div id="panel-2" class="panel">
             <p>Content</p>
          </div>
      </div>

      Set aria-expanded to "true" on the tab you want open at start

### Methods

#### destroy()

  Remove all events, css class, ...

#### update()

  Restart the module

### Type Definitions

#### Accordion_animation($tab, $panel)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `$tab` | HTMLElement |
  `$panel` | HTMLElement |

  ##### Returns:

  Type
    Promise

#### Accordion_callback($tab, $panel)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `$tab` | HTMLElement |
  `$panel` | HTMLElement |

#### Search results