DOTD Component Library

Accordion 

<div class="c-accordion">
      <div class="c-accordion__item">
          <div class="c-accordion__header js-toggle-parent">
              <h4 class="o-heading o-heading--xs c-accordion__heading">
                  Accordion Item Title
              </h4>
              <span class="o-icon o-icon--md c-accordion__icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
                  </svg>
              </span>
          </div>
          <div class="c-accordion__content">
              <div class="o-rich-text c-accordion__rich-text">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
              </div>
          </div>
      </div>
      <div class="c-accordion__item this-is-active">
          <div class="c-accordion__header js-toggle-parent">
              <h4 class="o-heading o-heading--xs c-accordion__heading">
                  Accordion Item Title
              </h4>
              <span class="o-icon o-icon--md c-accordion__icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
                  </svg>
              </span>
          </div>
          <div class="c-accordion__content">
              <div class="o-rich-text c-accordion__rich-text">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
              </div>
          </div>
      </div>
      <div class="c-accordion__item">
          <div class="c-accordion__header js-toggle-parent">
              <h4 class="o-heading o-heading--xs c-accordion__heading">
                  Accordion Item Title
              </h4>
              <span class="o-icon o-icon--md c-accordion__icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
                  </svg>
              </span>
          </div>
          <div class="c-accordion__content">
              <div class="o-rich-text c-accordion__rich-text">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
              </div>
          </div>
      </div>
  </div>
 
{% set base_class = accordion.base_class|default('c-accordion') %}
{% if accordion.items %}
  <div class="{{ bem(base_class, accordion.element, accordion.modifiers, accordion.extra) }}">
    {% for item in accordion.items %}
      <div class="{{ bem(base_class, 'item', '', item.extra) }}">
        <div class="{{ bem(base_class, 'header') }} js-toggle-parent">
          {% include "@heading" with {
            "heading": {
              "level": "4",
              "size": "xs",
              "text": item.heading,
              "extra": bem(base_class, 'heading')
            }
          } %}
          {% include "@icon" with {
            "icon": {
              "name": "chevron-down",
              "modifiers": "md",
              "extra": bem(base_class, 'icon')
            }
          } %}
        </div>
        <div class="{{ bem(base_class, 'content') }}">
          {% include "@rich-text" with {
            "rich_text": {
              "text": item.text,
              "extra": bem(base_class, 'rich-text')
            }
          } %}
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}
 
{
  "accordion": {
    "items": [
      {
        "heading": "Accordion Item Title",
        "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>"
      },
      {
        "heading": "Accordion Item Title",
        "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>",
        "extra": "this-is-active"
      },
      {
        "heading": "Accordion Item Title",
        "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis. Mi bibendum neque egestas congue quisque egestas diam in arcu. Fringilla est ullamcorper eget nulla facilisi etiam. In ornare quam viverra orci sagittis eu volutpat odio. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>"
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------ *\
  $ACCORDION
\* ------------------------------------ */

.c-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--dotd-space);

  &__item {
    background-color: var(--dotd-color-body-background);
    border: var(--dotd-border-width-md) solid var(--dotd-color-border-default-weak);
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow var(--dotd-animation-duration) var(--dotd-animation-timing);

    &:hover,
    &:focus {
      background-color: var(--dotd-color-background-default-strong);
      box-shadow: var(--dotd-box-shadow);
      overflow: visible;
    }

    &.this-is-active {
      .c-accordion__content {
        max-height: 100vh;
        overflow: auto;
        transition: max-height var(--dotd-animation-duration) var(--dotd-animation-timing);
      }

      .c-accordion__icon {
        transform: rotate(180deg);
      }
    }
  }

  &__header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: var(--dotd-space-md);
    width: 100%;
  }

  &__heading {
    flex: 1;
    text-align: left;
  }

  &__icon {
    color: var(--dotd-color-content-secondary-default);
    transform: rotate(0);
    transition: transform var(--dotd-animation-duration) var(--dotd-animation-timing);
  }

  &__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dotd-animation-duration) var(--dotd-animation-timing);
  }

  &__rich-text {
    padding: var(--dotd-space-md);
    padding-top: 0;
  }
}
  • URL: /components/raw/accordion/_accordion.scss
  • Filesystem Path: components/02-molecules/accordion/_accordion.scss
  • Size: 1.5 KB

No notes defined.