+++
[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:

```html
<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>
```