iptools-jquery-accordion

jQuery accordion plugin

Features

Lightweight and easy to use jQuery accordion plugin.

Requirements

• jQuery >= 1.11.3

Example

<div class="accordion">
  <div class="accordion__panel">
    <div class="accordion__trigger"></div>
    <div class="accordion__content"></div>
  </div>
  <!-- panels with panelActiveClass will be opened automatically on plugin initialization -->
  <div class="accordion__panel accordion__panel--active">
    <div class="accordion__trigger"></div>
    <div class="accordion__content"></div>
  </div>
  <!-- panels with data-accordion-panel-activated will also be opened automatically on plugin initialization -->
  <div class="accordion__panel" data-accordion-panel-activated="true">
    <div class="accordion__trigger"></div>
    <div class="accordion__content"></div>
  </div>
  <div class="accordion__panel">
    <div class="accordion__trigger"></div>
    <div class="accordion__content"></div>
  </div>
</div>

<script src="dist/iptools-jquery-accordion.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.accordion').iptAccordion({
      animationSpeed: 500,
      singleOpen: true,
      baseClass: 'accordion',
      initializedClass: 'accordion--initialized',
      panelClass: 'accordion__panel',
      panelActiveClass: 'accordion__panel--active',
      triggerClass: 'accordion__trigger',
      triggerActiveClass: 'accordion__trigger--active',
      contentClass: 'accordion__content',
      contentActiveClass: 'accordion__content--active'
    });
  });
</script>

Options

Name | Default | Type | Description :------------------|:-----------------------------|:--------|:----------- animationSpeed | 500 | int | Animation speed in miliseconds. singleOpen | true | boolean | Only one open panel at a time. baseClass | accordion | string | Base class of the accordion. initializedClass | accordion--initialized | string | Class added to the accordion after initialization. panelClass | accordion__panel | string | Class of panel. panelActiveClass | accordion__panel--active | string | Class of active panel. triggerClass | accordion__trigger | string | Class of trigger element. triggerActiveClass | accordion__trigger--active | string | Class of active trigger element. contentClass | accordion__content | string | Class of content element. contentActiveClass | accordion__content--active | string | Class of active content element.

Data attributes

Name | Type | Description :------------------|:--------|:----------- data-accordion-panel-activated | boolean | Denotes active panel opened on plugin initilization. See also panelActiveClass option.

Events

Emitted events

Event | Emitter | Description :----- | :-------- | :----------- initialized.iptAccordion | wrapper / base element | On successful plugin initialization | beforeOpen.iptAccordion | individual panel | Before panel is opened | afterOpen.iptAccordion | individual panel | After panel has been opened (animation complete) | beforeClose.iptAccordion | individual panel | Before a panel is closed  | afterClose.iptAccordion | individual panel | After panel has been closed (animation complete) |

Subscribed events

Event | Action :----- | :----------- open.iptAccordion | Opens panel | close.iptAccordion | Closes panel | toggle.iptAccordion | Toggles panel |

Licence

Copyright © 2015-2016 Interactive Pioneers GmbH. Licenced under GPL-3.