@e-fellows/website-2022

Ausklappbarer Text 

<details class="accordion" id="accordion-79852-45661">
    <summary class="accordion__summary has-underline">
        <div class="accordion__summary-inner">
            <span class="accordion__summary-text u-underline">Mehr anzeigen</span>

            <svg class="icon icon--caret-down-alt accordion__summary-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
            </svg>
        </div>
    </summary>

    <div class="accordion__content">
        <div class="accordion__block">

            <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

        </div>
        <div class="accordion__block">

            <picture class="image">
                <img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
            </picture>

        </div>
        <div class="accordion__block">

            <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
            <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

        </div>
        <div class="accordion__block">

            <a class="button u-underline" href="#">Das ist ein Button</a>

        </div>
    </div>
</details>
 
{% set id = id ??? html_id('accordion') -%}

<details {{ html_attributes({
  class: 'accordion',
  id: id,
  open: open ?? false,
}, attrs ?? {}) }}>
  <summary class="accordion__summary has-underline">
    <div class="accordion__summary-inner">
      <span class="accordion__summary-text u-underline">
        {{- summary ??? 'Show more'|t('site') -}}
      </span>

      {% include '@icon' with {
        icon: 'caret-down-alt',
        class: 'accordion__summary-icon',
      } only %}
    </div>
  </summary>

  <div class="accordion__content">
    {% for block in blocks|default([]) %}
      <div {{ html_attributes({
        id: block.id ?? false,
        class: 'accordion__block',
      }) }}>
        {{ block.content | raw }}
      </div>
    {% endfor %}
  </div>
</details>
 
{
  "blocks": [
    {
      "content": "!twig\n\n{% apply componentize %}\n  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
    },
    {
      "content": "!twig\n\n{% include '@image' with {\n  src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n  width: 470,\n  height: 264,\n  alt: 'Das ist ein Platzhalter-Bild',\n} only %}\n"
    },
    {
      "content": "!twig\n\n{% apply componentize %}\n  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
    },
    {
      "content": "!twig\n\n{% include '@button' with {\n  text: 'Das ist ein Button',\n  link: '#',\n} only %}\n"
    }
  ]
}
  • Content: 
    :root {
  --accordion-background-color: var(--color-cyan-light);
  --accordion-icon-color: var(--color-orange);
  --accordion-summary-font-size: 2rem;
  --accordion-content-font-size: var(--body-font-size);
}

.accordion {
  background-color: var(--accordion-background-color);
}

.accordion__summary {
  appearance: none;
  display: block;
  font-size: var(--accordion-summary-font-size);
  font-weight: 600;
  line-height: var(--line-height-body);
  user-select: none;

  &::-webkit-details-marker,
  &::marker {
    display: none;
  }
}

.accordion__summary-inner {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 1.5rem 2rem;
}

.accordion__summary-icon {
  color: var(--accordion-icon-color);
  flex-shrink: 0;
  font-size: 3rem;
  line-height: 0;
  margin-inline-start: auto;
  transition-property: transform;

  .accordion[open] & {
    transform: rotate(180deg);
  }
}

.accordion__content {
  line-height: var(--line-height-body);
  padding: 0 2rem 2rem;
}

.accordion__block {
  & + & {
    margin-block-start: 2rem;
  }

  > * + * {
    margin-block-start: 2rem;
  }
}
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: src/components/2-molecules/accordion/accordion.scss
  • Size: 1.1 KB
  • Content: 
    import { on } from 'delegated-events';
import invisibleFocus from '../../../javascripts/utils/invisibleFocus';

on('click', 'summary.accordion__summary', (event) => {
  const { currentTarget: $summary } = event;
  invisibleFocus($summary);
});
  • URL: /components/raw/accordion/accordion.ts
  • Filesystem Path: src/components/2-molecules/accordion/accordion.ts
  • Size: 244 Bytes

No notes defined.