Mozaic

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.

Viewport: px

<div class="example">
  <div class="mc-accordion">
    <div class="mc-accordion__header">
      <h2 class="mc-accordion__title">
        <button
          id="accordion"
          class="mc-accordion__trigger"
          aria-controls="content"
          aria-expanded="false"
          data-mc-component="accordion"
        >
          <svg class="mc-accordion__icon">
            <use href="#Store_StoreLM_32px"></use>
          </svg>
          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>
</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>

<script>
  const accordions = document.querySelectorAll(
    '[data-mc-component="accordion"]'
  )
  accordions.forEach(function (accordion) {
    if (accordion.hasAttribute('disabled')) {
      accordion.closest('.mc-accordion').classList.add('is-disabled')
    }

    accordion.addEventListener('click', function (e) {
      const component = accordion.closest('.mc-accordion')
      const button = component.querySelector('.mc-accordion__trigger')
      const content = component.querySelector('.mc-accordion__content')
      const expanded =
        button.getAttribute('aria-expanded') === 'false' ? false : true
      const hidden =
        content.getAttribute('aria-hidden') === 'false' ? false : true

      component.classList.toggle('is-open')
      button.setAttribute('aria-expanded', !expanded)
      content.setAttribute('aria-hidden', !hidden)
    })
  })
</script>

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.