@wearediagram/wsol.accordion

Accordion

Content accordions that toggle content when clicked.

Installation

Install via Bower:

$ bower install websolutions/accordion --save

Usage

The most basic example follows this DOM structure:

<div class="accordion">
  <div class="item">
    <h3 class="header sprite-container">Accordion Item #1</h3>
    <div class="info">Teaser text.</div>
    <div class="more">
      <p>Accordion Content</p>
    </div>
  </div>
  <div class="item">
    <h3 class="header sprite-container">Accordion Item #2</h3>
    <div class="info">Teaser text.</div>
    <div class="more">
      <p>Accordion Content</p>
    </div>
  </div>
</div>

And is initialized like so:

$(".accordion").wsol_accordion()

Configuring

The jQuery plugin supports a number of configuration options:

Option	Type	Description	Default
itemSelector	String	Selector for accordion items	.item
headerSelector	String	Selector for clickable header	.header
bodySelector	String	Selector for content that will toggle	.more
autoCollapse	Boolean	Other accordion items should close when one is opened	true
openClass	String	Class name to apply when the accordion is opened	open
closeClass	String	Class name to apply when the accordion is closed	close
startCollapsed	Boolean	The accordion should be collapsed initially	true
startFirstOpen	Boolean	If the accordion should start collapsed, keep the first item open	false
spriteContainer	String	Selector for the sprite container	.sprite-container
spriteClass	String	Class name to apply to the sprite element	toggle-sprite
customSprite	Function	Function to rebuild sprite contents
toggleSpeed	Integer	Animation length (ms)	500
beforeOpen	Function	Function called before the accordion item is opened	null
beforeClose	Function	Function called before the accordion item is closed	null
afterOpen	Function	Function called after the accordion item is opened	null
afterClose	Function	Function called after the accordion item is closed	null