mini-strap/packages/website/content/components/accordion.md

+++ [taxonomies] section = ["Components"] +++

Accordion

Basic

The accordion component allows to hide and show content in the page. The accordion is composed of the following elements:

• msp-accordion: the main container that encapsulates multiple toggable elements.
• msp-accordion-item: a single toggable element.
• msp-accordion-header: this element acts as the header and responds to the onclick event to toggle the content.
• msp-accordion-collapse: container for the content, needed to help with dynamic height and transitions.
• msp-accordion-content: the content of the accordion.

Example:

<ul class="msp-list-unstyle msp-accordion">
  <li class="msp-accordion-item">
    <a class="msp-accordion-header" href="#">ITEM 001</a>
    <div class="msp-accordion-collapse">
      <div class="msp-list-unstyle msp-accordion-content">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
      </div>
    </div>
  </li>

  <li class="msp-accordion-item">
    <a class="msp-accordion-header" href="#">ITEM 002</a>
    <div class="msp-accordion-collapse">
      <div class="msp-list-unstyle msp-accordion-content">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
      </div>
    </div>
  </li>
</ul>