Language: ENCN

Accordion List React Component

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

Usage example

<List accordion>
  <ListItem accordionItem title="Accordion Item 1">
    <AccordionContent>
      <ContentBlock>
        <p>Accordion Item 1 Content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
      </ContentBlock>
    </AccordionContent>
  </ListItem>
  <ListItem accordionItem title="Accordion Item 2">
    <AccordionContent>
      <ContentBlock>
        <p>Accordion Item 2 Content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
      </ContentBlock>
    </AccordionContent>
  </ListItem>
</List>

Renders to:

<div class="list-block accordion-list">
  <ul>
    <li class="accordion-item">
      <a href="#" class="item-link">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Accordion Item 1</div>
          </div>
        </div>
      </a>
      <div class="accordion-item-content">
        <p>Accordion Item 1 Content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
      </div>
    </li>
    <li class="accordion-item">
      <a href="#" class="item-link">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Accordion Item 2</div>
          </div>
        </div>
      </a>
      <div class="accordion-item-content">
        <p>Accordion Item 2 Content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
      </div>
    </li>
  </ul>
</div>

Event Properties

The following events are avialiable on <ListItem> component whith enable accordion-item:

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.