Accordions

figma:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Import

Import the settings and the accordion scss files.


@import 'settings-tools/all-settings';
@import 'components/c.accordion';

Basic usage

The creation of an Accordion in your code is done using the following HTML structure:


<div class="mc-accordion">
  <div class="mc-acccordion__header">
    <h2 class="mc-accordion__title">
      <button
        id="accordion"
        class="mc-accordion__trigger"
        data-mc-component="accordion"
        aria-controls="content"
        aria-expanded="false"
      >
        Accordion title
      </button>
    </h2>
  </div>
  <div
    id="content"
    class="mc-accordion__content"
    aria-hidden="true"
    aria-labelledby="accordion"
  >
    <p>
      Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut condimentum
      at orci aliquam feugiat. Curabitur sagittis placerat leo sit amet
      pharetra.
    </p>
  </div>
</div>

States

Depending on the context of use, the accordion can have several states:

Close
Open
Close Disabled
Open Disabled

Variations

Sizes

Mozaic offers you two sizes of accordions that you can use, by applying the following modifiers on the mc-accordion element :

Size S: use the mc-accordion--s modifier
Size M: default size - no modifier needeed

No padding

You have the possibility to have an accordion with no padding.

For this you have to add the mc-accordion--no-padding modifier to the main mc-accordion element.

With icon

You can add an icon into any accordions you want.

For this just add the CSS class mc-accordion__icon to your svg icon and and insert the icon inside the button mc-accordion__trigger.

With Toogle

You can add a Mozaic Toggle into any accordions you want.

For this you have to add to the mc-accordion--checkable modifier to the main mc-accordion element.

Then add your toggle element inside the mc-accordion__header element.

With Checkbox

You can add a Mozaic Checkbox into any accordions you want.

For this you have to add to the mc-accordion--checkable modifier to the main mc-accordion element.

Then add your toggle element inside the mc-accordion__header element.