Accordion

Default configuration
Toggle Accordion #1
Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus.
Source code (HTML)
<esl-panel-group class="accordion-group">
  <div class="esl-d-accordion">
    <esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
      Toggle Accordion #1
    </esl-trigger>
    <esl-panel open="" class="esl-d-accordion-panel">
      <div class="esl-d-accordion-body">
        <!-- text 100 -->
      </div>
    </esl-panel>
  </div>
  <div class="esl-d-accordion">
    <esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
      Toggle Accordion #2
    </esl-trigger>
    <esl-panel class="esl-d-accordion-panel">
      <div class="esl-d-accordion-body">
        <!-- text 100 -->
      </div>
    </esl-panel>
  </div>
  <div class="esl-d-accordion">
    <esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
      Toggle Accordion #3
    </esl-trigger>
    <esl-panel class="esl-d-accordion-panel">
      <div class="esl-d-accordion-body">
        <!-- text 100 -->
      </div>
    </esl-panel>
  </div>
</esl-panel-group>
Source code (JS)
import { ESLPanelGroup, ESLPanel, ESLTrigger } from '@exadel/esl';
ESLPanelGroup.register();
ESLPanel.register();
ESLTrigger.register();