Apps and development tools - jQuery Plugins


Accordion

This plugins provides an accordion view. It takes a set of "content panels" and display only one of them hiding the others.

Includes

Static include:

<tml:include designdb="@afw" ref="include:jquery" o_jquery-plugins="accordion"/>

Dynamic Include:

requirejs(["jquery-accordion"], function(){...})

HTML

<div class="accordion" id="myAccordion">

  <div class="accordion-header">A1</div>
  <div class="accordion-panel">
    Panel A1
  </div>

  <div class="accordion-header">A2</div>
  <div class="accordion-panel">
    Panel A2
  </div>


</div>

Usage

The slider is created via JavaScript as follows:

$("#myAccordion").wga_accordion(options)

Parameter "options" is an optional JavaScript object. Valid properties are

  • active: specifies the panel (Number, starting with 0) that is active (expanded). 

Events

  • activated: fired after a panel is activated (expanded). The event handler is called with an additional parameter: the panel element that has been activated.

Sample:

$("#myAccordion").on("activated", function(event, el){

  console.log("panel activated", el)

}).wga_accordion()