-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
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. |