SponsorsBecome a sponsor

Accordion React Component

Accordion React component represents Framework7's Accordion component.

Accordion Components

There are following components included:

Accordion Properties

PropTypeDefaultDescription
<AccordionItem> properties
openedbooleanMakes accordion item opened

Accordion Events

EventDescription
<AccordionItem> events
accordionBeforeOpenEvent will be triggered right before accordion content starts its opening animation. First handler argument receives prevent function that will prevent accordion from opening when called.
accordionOpenEvent will be triggered when accordion content starts its opening animation.
accordionOpenedEvent will be triggered after accordion content completes its opening animation.
accordionBeforeCloseEvent will be triggered right before accordion content starts its closing animation. First handler argument receives prevent function that will prevent accordion from closing when called.
accordionCloseEvent will be triggered when accordion content starts its closing animation.
accordionClosedEvent will be triggered after accordion content completes its closing animation.

Accordion List

Accordion List is not a separate component, but just a particular case of using <List>, <ListItem> and <AccordionContent> components.

In this case accordion events will be fired on ListItem.

Examples

accordion.jsx
import React from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  Block,
  List,
  ListItem,
  AccordionContent,
} from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Accordion" />

    <BlockTitle>List View Accordion</BlockTitle>
    <List strong outlineIos dividersIos insetMd accordionList>
      <ListItem accordionItem title="Lorem Ipsum">
        <AccordionContent>
          <Block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
              ipsum.
            </p>
          </Block>
        </AccordionContent>
      </ListItem>
      <ListItem accordionItem title="Nested List">
        <AccordionContent>
          <List>
            <ListItem title="Item 1" />
            <ListItem title="Item 2" />
            <ListItem title="Item 3" />
            <ListItem title="Item 4" />
          </List>
        </AccordionContent>
      </ListItem>
      <ListItem accordionItem title="Integer semper">
        <AccordionContent>
          <Block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
              ipsum.
            </p>
          </Block>
        </AccordionContent>
      </ListItem>
    </List>

    <BlockTitle>Opposite Side</BlockTitle>
    <List strong outlineIos dividersIos insetMd accordionList accordionOpposite>
      <ListItem accordionItem title="Lorem Ipsum">
        <AccordionContent>
          <Block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
              ipsum.
            </p>
          </Block>
        </AccordionContent>
      </ListItem>
      <ListItem accordionItem title="Nested List">
        <AccordionContent>
          <List>
            <ListItem title="Item 1" />
            <ListItem title="Item 2" />
            <ListItem title="Item 3" />
            <ListItem title="Item 4" />
          </List>
        </AccordionContent>
      </ListItem>
      <ListItem accordionItem title="Integer semper">
        <AccordionContent>
          <Block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
              ipsum.
            </p>
          </Block>
        </AccordionContent>
      </ListItem>
    </List>
  </Page>
);
Improve this Doc
On this page