Components

Accordions

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready

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>