Accordion React Component

Accordion Components
Accordion Properties
Accordion Events
Accordion List
Examples

Accordion React component represents Framework7's Accordion component.

Accordion Components

There are following components included:

Accordion
AccordionItem
AccordionToggle
AccordionContent

Accordion Properties

Prop	Type	Default	Description
<AccordionItem> properties
opened	boolean		Makes accordion item opened

Accordion Events

Event	Description
<AccordionItem> events
accordionBeforeOpen	Event 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.
accordionOpen	Event will be triggered when accordion content starts its opening animation.
accordionOpened	Event will be triggered after accordion content completes its opening animation.
accordionBeforeClose	Event 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.
accordionClose	Event will be triggered when accordion content starts its closing animation.
accordionClosed	Event 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

import React from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  List,
  ListItem,
  AccordionContent,
  Block,
  AccordionItem,
  AccordionToggle,
} from 'framework7-react';

export default () => (
  
    
  <Page>
    <Navbar title="Accordion" />
    <BlockTitle>List View Accordion</BlockTitle>
    <List 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>
            <ListItem title="Item 2"></ListItem>
            <ListItem title="Item 3"></ListItem>
            <ListItem title="Item 4"></ListItem>
          </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>Inset Accordion</BlockTitle>
    <List accordionList inset>
      <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>
            <ListItem title="Item 2"></ListItem>
            <ListItem title="Item 3"></ListItem>
            <ListItem title="Item 4"></ListItem>
          </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 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>
            <ListItem title="Item 2"></ListItem>
            <ListItem title="Item 3"></ListItem>
            <ListItem title="Item 4"></ListItem>
          </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>Custom Collapsible</BlockTitle>
    <Block inner accordionList>
      {Array.from(Array(3).keys()).map((n) => (
        <AccordionItem key={n}>
          <AccordionToggle>
            <b>Item {n + 1}</b>
          </AccordionToggle>
          <AccordionContent>Content {n + 1}</AccordionContent>
        </AccordionItem>
      ))}
    </Block>
  </Page>
    
  
);