<dl class="accordion">
    <dt class="accordion__title js-accordion-title">Akkordeon Headline I</dt>
    <dd class="accordion__content js-accordion-content">
        <div class="formatted-text">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.</p>
        </div>
    </dd>
    <dt class="accordion__title js-accordion-title">Akkordeon Headline II</dt>
    <dd class="accordion__content js-accordion-content">
        <div class="formatted-text formatted-text--image-left">
            <figure class="figure" aria-labelledby="figure-5cb9">
                <div class="figure__media">
                    <img class="image" alt="Das ist ein Platzhalter-Bild" src="/images/dummy/figure-480x320.jpg" />
                </div>
                <figcaption class="figure__caption" id="figure-5cb9">
                    Ich bin eine Bildunterschrift <small class="figure__copyright">(Quellenangabe)</small>
                </figcaption>
            </figure>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.</p>
        </div>
    </dd>
    <dt class="accordion__title js-accordion-title">Akkordeon Headline III</dt>
    <dd class="accordion__content js-accordion-content">
        <div class="formatted-text formatted-text--image-right">
            <figure class="figure" aria-labelledby="figure-58c4">
                <div class="figure__media">
                    <img class="image" alt="Das ist ein Platzhalter-Bild" src="/images/dummy/figure-480x320.jpg" />
                </div>
                <figcaption class="figure__caption" id="figure-58c4">
                    Ich bin eine Bildunterschrift <small class="figure__copyright">(Quellenangabe)</small>
                </figcaption>
            </figure>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
                ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.</p>
        </div>
    </dd>
</dl>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render accordion
dl.accordion&attributes(attr)
  //- Panels
  if panels
    each panel in panels
      dt.accordion__title.js-accordion-title #{panel.title}
      dd.accordion__content.js-accordion-content
        != include('@formatted-text', panel.formatText)
{
  "panels": [
    {
      "title": "Akkordeon Headline I",
      "formatText": {
        "content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.\n"
      }
    },
    {
      "title": "Akkordeon Headline II",
      "formatText": {
        "modifier": "image-left",
        "figure": true,
        "content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.\n"
      }
    },
    {
      "title": "Akkordeon Headline III",
      "formatText": {
        "modifier": "image-right",
        "figure": true,
        "content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. m voluptua.\n"
      }
    }
  ]
}
  • Content:
    import randomId from '../../../javascripts/utils/random-id';
    
    // Add accessibility attributes
    document.querySelectorAll('.accordion__title').forEach(($title) => {
      const id = randomId();
      const $content = $title.nextElementSibling;
    
      // Set IDs
      $title.setAttribute('id', `accordion-title-${id}`);
      $content.setAttribute('id', `accordion-content-${id}`);
    
      // Set roles
      $title.setAttribute('role', 'tab');
      $content.setAttribute('role', 'tabpanel');
    
      // Setup relationship
      $title.setAttribute('aria-controls', `accordion-content-${id}`);
      $content.setAttribute('aria-labelledby', `accordion-title-${id}`);
    
      // Other attributes
      $title.setAttribute('aria-expanded', 'false');
      $title.setAttribute('aria-selected', 'false');
      $title.setAttribute('tabindex', '-1');
      $content.setAttribute('aria-hidden', 'true');
    });
    
    // Init accordion
    document.querySelectorAll('.accordion').forEach(($accordion) => {
      // Add accessibility attributes
      $accordion.setAttribute('role', 'tablist');
      $accordion.setAttribute('aria-multiselectable', 'true');
    
      // Add events
      $accordion.querySelectorAll('.accordion__title').forEach(($title, index, $titles) => {
        // Make first tab clickable
        if (index === 0) $title.setAttribute('tabindex', '0');
    
        // Save focus
        const saveFocus = () => {
          // Reset other tab attributes
          $titles.forEach(($t) => {
            $t.setAttribute('tabindex', '-1');
            $t.setAttribute('aria-selected', 'true');
          });
    
          // Set this tab attributes
          $title.setAttribute('tabindex', '0');
          $title.setAttribute('aria-selected', 'true');
        };
    
        // Click event
        $title.addEventListener('click', () => {
          // States
          const $content = $title.nextElementSibling;
          const active = $content.matches('.accordion__content--active');
    
          // Save focus
          saveFocus();
    
          // Set this tab attributes
          $title.setAttribute('aria-expanded', active ? 'false' : 'true');
          $content.setAttribute('aria-hidden', active ? 'true' : 'false');
          $content.classList.toggle('accordion__content--active');
        });
    
        // Keydown event
        $title.addEventListener('keydown', (event) => {
          const $first =
            $accordion.querySelector('.accordion__title:first-of-type');
          const $last =
            $accordion.querySelector('.accordion__title:last-of-type');
          const $next =
            $last !== $title ? $title.nextElementSibling.nextElementSibling : false;
          const $prev =
            $first !== $title ? $title.previousElementSibling.previousElementSibling : false;
    
          // Prevent default event
          if ([13, 32, 35, 36, 37, 38, 39, 40].indexOf(event.which) >= 0) {
            event.preventDefault();
            event.stopPropagation();
          }
    
          // eslint-disable-next-line default-case
          switch (event.which) {
            // Left/Up
            case 37:
            case 38:
              // Check for previous question
              if (!$prev) { $last.focus(); } else { $prev.focus(); }
              break;
    
            // Right/Down
            case 39:
            case 40:
              // Check for next question
              if (!$next) { $first.focus(); } else { $next.focus(); }
              break;
    
            // Home
            case 36:
              // Set focus on first question
              $first.focus();
              break;
    
            // End
            case 35:
              // Set focus on last question
              $last.focus();
              break;
    
            // Enter/Space
            case 13:
            case 32:
              // Show content
              $title.click();
              break;
          }
        });
    
        // Focus event
        $title.addEventListener('focus', saveFocus);
      });
    });
    
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: src/components/molecules/accordion/accordion.js
  • Size: 3.6 KB
  • Content:
    .accordion {
      border-bottom: 1px solid $color-steelgrey-light;
      font-size: 1.5rem;
    
      .detail-page__content & {
        margin-bottom: 5rem;
      }
    }
    
    .accordion__title {
      border-top: 1px solid $color-steelgrey-light;
      color: $color-blue;
      cursor: pointer;
      font-weight: bold;
      outline: none;
      padding-bottom: 1rem;
      padding-left: 3rem;
      padding-top: 1rem;
      position: relative;
    
      &:hover {
        text-decoration: underline;
      }
    
      &::before {
        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"><path fill="#DC0A1E" d="M8 6.6L1.7.3C1.33-.1.7-.1.3.3-.1.67-.1 1.3.3 1.7l7 7c.38.4 1.02.4 1.4 0l7-7c.4-.38.4-1.02 0-1.4-.38-.4-1.02-.4-1.4 0L8 6.6z"/></svg>');
        content: '';
        display: inline-block;
        height: 0.9rem;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        transition: $default-transition-duration transform;
        width: 1.6rem;
      }
    
      &[aria-expanded='true']::before {
        transform: translate(0, -50%) rotate(180deg);
      }
    
      @include mq($from: m) {
        font-size: 1.7rem;
      }
    
      @include mq($from: l) {
        font-size: 1.9rem;
      }
    
      .no-js & {
        cursor: default;
      }
    }
    
    .accordion__content {
      display: none;
      margin-left: 0;
      padding-bottom: 1rem;
      padding-left: 3rem;
    
      > :last-child {
        margin-bottom: 0;
      }
    
      .no-js & {
        display: block;
      }
    }
    
    .accordion__content--active {
      animation: accordionIn 0.45s normal ease-in-out both 1;
      display: block;
    }
    
    @keyframes accordionIn {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: src/components/molecules/accordion/accordion.scss
  • Size: 1.5 KB

There are no notes for this item.