# Class: Tabs

## Tabs

#### new Tabs($tabsWrapper [, userOptions])

  Tabs

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `$tabsWrapper` | HTMLElement |  |
  `userOptions` | Object | <optional> | ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `tabSelector` | String | <optional> | 'li[aria-selected]' |
  `onOpenAtStart` | Tabs_callback | <optional> |  |
  `onOpen` | Tabs_callback | <optional> |  |
  `onClose` | Tabs_callback | <optional> |  |
  `animations` | Object | <optional> |  | ###### Properties
  Name | Type | Argument | Description
  --- | --- | --- | ---
  `open` | Tabs_animation | <optional> |
  `close` | Tabs_animation | <optional> |
  `destroy` | Tabs_animation | <optional> |

  ##### Example

      new Tabs( document.querySelector( '.tabs' ), {
           "tabSelector":     ".tab",
           "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="tabs">
        <ul role="tablist">
          <li role="tab" id="tab-1" tabindex="-1" aria-selected="false" aria-controls="panel-1">Tab 1</li>
          <li role="tab" id="tab-2" tabindex="0" aria-selected="true" aria-controls="panel-2">Tab 2</li>
          <li role="tab" id="tab-3" tabindex="-1" aria-selected="false" aria-controls="panel-3">Tab 3</li>
          <li role="tab" id="tab-4" tabindex="-1" aria-selected="false" aria-controls="panel-4">Tab 4</li>
        </ul>
        <div role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0">
          [Content 1]
        </div>
        <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0">
          [Content 2 (displayed at start)]
        </div>
        <div role="tabpanel" id="panel-3" aria-labelledby="tab-3" tabindex="0">
          [Content 3]
        </div>
        <div role="tabpanel" id="panel-4" aria-labelledby="tab-4" tabindex="0">
          [Content 4]
        </div>
      </div>

      Set aria-selected to "true" and tabindex="0" on the tab you want open at start.
      If the tabs are displayed vertically, add aria-orientation="vertical" on the role="tablist" element

### Methods

#### destroy()

  Remove all events, css class, ...

#### update()

  Restart the module

### Type Definitions

#### Tabs_animation($tab, $panel)

  ##### Parameters:

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

  ##### Returns:

  Type
    Promise

#### Tabs_callback($tab, $panel)

  ##### Parameters:

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

#### Search results