Accordion

Example 1: Standard

You can disable the ability to close an open accordion by removing data-closable="true" from the main container.

Donec tempor orci in libero mattis

Mauris et hendrerit justo, a aliquet elit. Morbi dapibus ligula eget nibh suscipit, ut blandit mi finibus. Mauris eros tortor, tincidunt at feugiat et, iaculis viverra odio.

Donec tempor orci in libero mattis

Mauris et hendrerit justo, a aliquet elit. Morbi dapibus ligula eget nibh suscipit, ut blandit mi finibus. Mauris eros tortor, tincidunt at feugiat et, iaculis viverra odio.

<div class="accordion mg-none" data-closable="true">
...

...

...

...

</div>
Example 2: Accordion Tabs

The structure of standard is maintained. The only change is a modifier "accordion--tabs" that needs to be added to the main container.

  • Profile

    Mauris et hendrerit justo, a aliquet elit. Morbi dapibus ligula eget nibh suscipit, ut blandit mi finibus. Mauris eros tortor, tincidunt at feugiat et, iaculis viverra odio.

  • Favorites

    Mauris et hendrerit justo, a aliquet elit. Morbi dapibus ligula eget nibh suscipit, ut blandit mi finibus. Mauris eros tortor, tincidunt at feugiat et, iaculis viverra odio.

  • Following

    Mauris et hendrerit justo, a aliquet elit. Morbi dapibus ligula eget nibh suscipit, ut blandit mi finibus. Mauris eros tortor, tincidunt at feugiat et, iaculis viverra odio.

  • Collections

    Mauris et hendrerit justo, a aliquet elit. Morbi dapibus ligula eget nibh suscipit, ut blandit mi finibus. Mauris eros tortor, tincidunt at feugiat et, iaculis viverra odio.

<ul class="accordion accordion--tabs g-m">
  • ...
    ...
  • ...
    ...
  • ...
    ...
  • </ul>