Accordion React

Accordion React component represents Framework7's Accordion component.

Usage examples

Accordion

<Accordion>
  <!-- Item 1 -->
  <AccordionItem>
    <AccordionToggle>Item 1</AccordionToggle>
    <AccordionContent>
      Item 1 content...
    </AccordionContent>
  </AccordionItem>
  <!-- Item 2 -->
  <AccordionItem>
    <AccordionToggle>Item 2</AccordionToggle>
    <AccordionContent>
      Item 2 content...
    </AccordionContent>
  </AccordionItem>
</Accordion>

Renders to:

<div class="accordion-list">
  <!-- Item 1 -->
  <div class="accordion-item">
    <div class="accordion-item-toggle">Item 1</div>
    <div class="accordion-item-content">
      Item 1 content...
    </div>
  </div>
  <!-- Item 2 -->
  <div class="accordion-item">
    <div class="accordion-item-toggle">Item 2</div>
    <div class="accordion-item-content">
      Item 2 content...
    </div>
  </div>
</div>

Separate Collapsible

If you want to use single separate collapsible element you may just omit "Accordion" wrapper element:

<!-- Single collapsible element -->
<AccordionItem>
  <AccordionToggle>Item 1</AccordionToggle>
  <AccordionContent>
    Item 1 content...
  </AccordionContent>
</AccordionItem>

<!-- Another separate collapsible element -->
<AccordionItem>
  <AccordionToggle>Item 2</AccordionToggle>
  <AccordionContent>
    Item 2 content...
  </AccordionContent>
</AccordionItem>

Renders to:

<!-- Single collapsible element -->
<div class="accordion-item">
  <div class="accordion-item-toggle">Item 1</div>
  <div class="accordion-item-content">
    Item 1 content...
  </div>
</div>

<!-- Another separate collapsible element -->
<div class="accordion-item">
  <div class="accordion-item-toggle">Item 2</div>
  <div class="accordion-item-content">
    Item 2 content...
  </div>
</div>

Accordion Item Events

Event	Description
onAccordionOpen	Event will be triggered when accordion content starts its opening animation.
onAccordionOpened	Event will be triggered after accordion content completes its opening animation.
onAccordionClose	Event will be triggered when accordion content starts its closing animation.
onAccordionClosed	Event will be triggered after accordion content completes its closing animation.