Language: ENCN

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.