GNWT Base Theme Style Guide

4.1 components.accordion Accordion

Content displayed in a collapsible accordion using jQuery UI Accordion.

Example

Accordion header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordion header

Markup: components/accordion/accordion.twig

<div class="ui-accordion">
  <h3 class="ui-accordion-header">{{title}}</h3>
  <div class="ui-accordion-content ui-widget-content" style="display:none;">{{content}}</div>
</div>
<div class="ui-accordion">
  <h3 class="ui-accordion-header ui-state-active">{{title}}</h3>
  <div class="ui-accordion-content ui-widget-content">{{content}}</div>
</div>
<div class="ui-accordion">
  <h3 class="ui-accordion-header">{{title}}</h3>
  <div class="ui-accordion-content ui-widget-content" style="display:none;">{{content}}</div>
</div>

Source: sass/components/accordion/_accordion.scss, line 1