Components

Accordions

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
Usage
Code
Specs
Accessibility

Import

Import the settings and the accordion scss files. 

@import 'settings-tools/_all-settings';


@import 'components/_c.accordion';

Basic usage

To create a basic accordion, apply the following classes on this HTML elements:

  • mc-accordion on a div container
  • mc-accordion__trigger on a input[checkbox] tag
  • mc-accordion__label on a label tag
  • mc-accordion__content on a div tag
<div class="mc-accordion">
  <input type="checkbox" id="basicUsage" class="mc-accordion__trigger" />
  <label for="basicUsage" class="mc-accordion__label" aria-expanded="false">
    Accordion title
  </label>
  <div class="mc-accordion__content">
    <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>
Viewport: px 
<div class="example">
  <div class="mc-accordion">
    <input type="checkbox" id="basic" class="mc-accordion__trigger" />
    <label for="basic" class="mc-accordion__label" aria-expanded="false">
      Accordion title
    </label>
    <div class="mc-accordion__content">
      <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>
</div>
Warning

To have a full HTML/CSS accordion, we decided to use an input[checkbox] and a label instead of a button.

States

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

  • Close
  • Open
  • Close Disabled
  • Open Disabled
Viewport: px 
<div class="example">
  <div class="mc-accordion">
    <input type="checkbox" id="close" class="mc-accordion__trigger" />
    <label for="close" class="mc-accordion__label" aria-expanded="false">
      Accordion close
    </label>
    <div class="mc-accordion__content">
      <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>


  <div class="mc-accordion">
    <input type="checkbox" id="open" class="mc-accordion__trigger" checked />
    <label for="open" class="mc-accordion__label" aria-expanded="true">
      Accordion open
    </label>
    <div class="mc-accordion__content">
      <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>


  <div class="mc-accordion">
    <input
      type="checkbox"
      id="close-disabled"
      class="mc-accordion__trigger"
      disabled
    />
    <label for="close-disabled" class="mc-accordion__label" aria-expanded="false">
      Accordion close & disabled
    </label>
    <div class="mc-accordion__content">
      <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>


  <div class="mc-accordion">
    <input
      type="checkbox"
      id="open-disabled"
      class="mc-accordion__trigger"
      checked
      disabled
    />
    <label for="open-disabled" class="mc-accordion__label" aria-expanded="true">
      Accordion open & disabled
    </label>
    <div class="mc-accordion__content">
      <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>
</div>

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
Viewport: px 
<div class="example">
  <div class="example__item">
    <div class="mc-accordion mc-accordion--s">
      <input type="checkbox" id="sizeS" class="mc-accordion__trigger" />
      <label for="sizeS" class="mc-accordion__label" aria-expanded="false">
        Accordion size S
      </label>
      <div class="mc-accordion__content">
        <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>
  </div>
  <div class="example__item">
    <div class="mc-accordion">
      <input type="checkbox" id="sizeM" class="mc-accordion__trigger" />
      <label for="sizeM" class="mc-accordion__label" aria-expanded="false">
        Accordion size M
      </label>
      <div class="mc-accordion__content">
        <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>
  </div>
</div>

No padding

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

For this you have to add to the label the mc-accordion__label--no-padding modifier.

Viewport: px 
<div class="example">
  <div class="mc-accordion">
    <input type="checkbox" id="basic" class="mc-accordion__trigger" />
    <label
      for="basic"
      class="mc-accordion__label mc-accordion__label--no-padding"
      aria-expanded="false"
    >
      Accordion title
    </label>
    <div class="mc-accordion__content">
      <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>
  <div class="mc-accordion">
    <input type="checkbox" id="icon" class="mc-accordion__trigger" />
    <label
      for="icon"
      class="mc-accordion__label mc-accordion__label--no-padding mc-accordion__label--icon"
      aria-expanded="false"
    >
      <svg class="mc-accordion__icon">
        <use href="#Store_StoreLM_32px"></use>
      </svg>
      Accordion title
    </label>
    <div class="mc-accordion__content">
      <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>
</div>


<svg fill="#887f87" class="hidden" xmlns="http://www.w3.org/2000/svg">
  <symbol id="Store_StoreLM_32px" viewBox="0 0 32 32">
    <path
      d="M23 11l-5.59-5.59a2 2 0 00-2.82 0L9 11H5a2 2 0 00-2 2v12a2 2 0 002 2h22a2 2 0 002-2V13a2 2 0 00-2-2zm-3 14h-3.5v-5H20zm-4.5 0H12v-5h3.5zM27 25h-6v-5.5a.5.5 0 00-.5-.5h-9a.5.5 0 00-.5.5V25H5V13h4.83l.58-.59L16 6.83l5.59 5.58.58.59H27z"
    ></path>
    <path
      d="M16.71 10.71a1 1 0 00-1.42 0l-3.58 3.58a1 1 0 00.7 1.71h7.18a1 1 0 00.7-1.71z"
    ></path>
  </symbol>
</svg>

With icon

You can add an icon into any accordions you want.

For this you have to add to the label the mc-accordion__label--no-icon modifier.

Then just add the CSS class mc-accordion__icon to your icon.

<div class="mc-accordion">
  <input type="checkbox" id="iconUsage" class="mc-accordion__trigger" />
  <label
    for="iconUsage"
    class="mc-accordion__label mc-accordion__label mc-accordion__label--icon"
    aria-expanded="false"
  >
    <svg class="mc-accordion__icon" xmlns="http://www.w3.org/2000/svg">
      <symbol id="Store_StoreLM_32px" viewBox="0 0 32 32">
        <path
          d="M23 11l-5.59-5.59a2 2 0 00-2.82 0L9 11H5a2 2 0 00-2 2v12a2 2 0 002 2h22a2 2 0 002-2V13a2 2 0 00-2-2zm-3 14h-3.5v-5H20zm-4.5 0H12v-5h3.5zM27 25h-6v-5.5a.5.5 0 00-.5-.5h-9a.5.5 0 00-.5.5V25H5V13h4.83l.58-.59L16 6.83l5.59 5.58.58.59H27z"
        ></path>
        <path
          d="M16.71 10.71a1 1 0 00-1.42 0l-3.58 3.58a1 1 0 00.7 1.71h7.18a1 1 0 00.7-1.71z"
        ></path>
      </symbol>
    </svg>
    Accordion title
  </label>
  <div class="mc-accordion__content">
    <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>
Viewport: px 
<div class="example">
  <div class="mc-accordion">
    <input type="checkbox" id="icon" class="mc-accordion__trigger" />
    <label
      for="icon"
      class="mc-accordion__label mc-accordion__label--icon"
      aria-expanded="false"
    >
      <svg class="mc-accordion__icon">
        <use href="#Store_StoreLM_32px"></use>
      </svg>
      Accordion title
    </label>
    <div class="mc-accordion__content">
      <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>
</div>
<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
  <symbol id="Store_StoreLM_32px" viewBox="0 0 32 32">
    <path
      d="M23 11l-5.59-5.59a2 2 0 00-2.82 0L9 11H5a2 2 0 00-2 2v12a2 2 0 002 2h22a2 2 0 002-2V13a2 2 0 00-2-2zm-3 14h-3.5v-5H20zm-4.5 0H12v-5h3.5zM27 25h-6v-5.5a.5.5 0 00-.5-.5h-9a.5.5 0 00-.5.5V25H5V13h4.83l.58-.59L16 6.83l5.59 5.58.58.59H27z"
    ></path>
    <path
      d="M16.71 10.71a1 1 0 00-1.42 0l-3.58 3.58a1 1 0 00.7 1.71h7.18a1 1 0 00.7-1.71z"
    ></path>
  </symbol>
</svg>