AccordionsAccordions

Accordions overviewAccordions overview

The accordion widget structureThe accordion widget structure

  • accordions: the accordions widget, specified as:
    • element with data-widget="accordions"
  • tab: the accordion tabs/labels, specified as:
    • elements with role="tab"
    • using the data-tabs option, specified as a jQuery selector relative to the widget
    • even elements if the tabs are on the top
    • odd elements if the tabs are on the bottom
  • panel: the accordion panels, specified as one of:
    • elements with role="tabpanel"
    • using the data-panels option, specified as a jQuery selector relative to the widget
    • odd elements if the tabs are on the top
    • even elements if the tabs are on the bottom

Options for the accordion widgetOptions for the accordion widget

  • data-event: what event to respond to (click by default)
  • data-position: where the accordion tabs are placed relative to their panels (top or bottom, top by default)

Events for the accordion widget

  • beforeToggle: triggered on the tab and its panel element before the toggle happens
  • afterToggle: triggered on the tab and its panel element after the toggle happens

Both events have the following parameters:

  • toggle: a reference to the tab element
  • targets: a reference to the panel element
  • status: a boolean indicating whether the targets are visible (true) or hidden (false)
  • event: the actual event that triggered the toggle

Default accordions (top positioned)Default accordions (top positioned)


  <div data-widget="accordions" role="tablist" aria-multiselectable="true" class="ui-accordions">
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="0" role="tab" aria-controls="toggle-pane-138" id="toggle-139" aria-expanded="false">Accordion1</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-138" aria-expanded="false" aria-labelledby="toggle-139" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-140" id="toggle-141" aria-expanded="false">Accordion2</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-140" aria-expanded="false" aria-labelledby="toggle-141" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
      <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-142" id="toggle-143" aria-expanded="false">Accordion3</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-142" aria-expanded="false" aria-labelledby="toggle-143" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
    </div>
  </div>

Bottom positioned accordionsBottom positioned accordions


  <div data-widget="accordions" data-position="bottom" role="tablist" aria-multiselectable="true" class="ui-accordions">
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-144" aria-expanded="false" aria-labelledby="toggle-145" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="0" role="tab" aria-controls="toggle-pane-144" id="toggle-145" aria-expanded="false">Accordion1</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-146" aria-expanded="false" aria-labelledby="toggle-147" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
      <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-146" id="toggle-147" aria-expanded="false">Accordion2</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-148" aria-expanded="false" aria-labelledby="toggle-149" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-148" id="toggle-149" aria-expanded="false">Accordion3</h3>
  </div>