Accordion 

<div class="accordion">
    <details open>
        <summary>Organisation</summary>
        <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.</p>
    </details>
    <details>
        <summary>Domänenarchitektur</summary>
        <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.</p>
    </details>
    <details>
        <summary>Makroarchitektur</summary>
        <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.</p>
    </details>
    <details>
        <summary>Mikroarchitektur</summary>
        <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.</p>
    </details>
    <details>
        <summary>Code</summary>
        <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.</p>
    </details>
</div>
 
<div class="accordion">
    <details open>
        <summary>Organisation</summary>
        <p>{{text}}</p>
    </details>
    <details>
        <summary>Domänenarchitektur</summary>
        <p>{{text}}</p>
    </details>
    <details>
        <summary>Makroarchitektur</summary>
        <p>{{text}}</p>
    </details>
    <details>
        <summary>Mikroarchitektur</summary>
        <p>{{text}}</p>
    </details>
    <details>
        <summary>Code</summary>
        <p>{{text}}</p>
    </details>
</div>
 
{
  "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
}
  • Content: 
    .accordion {
  width: 100%;
  padding: 0 $spacer-md;

  :first-child {
    border-top: hidden;
  }

  details {
    padding: 10px 0;
    border-top: 1px solid $brand-secondary;
  }

  summary {
    @extend %heading-font-bold;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: $spacer-sm 0;

    font-size: $font-size-md;
    color: $h3-color;
    list-style: none;
  }

  summary::after {
    content: '+';
    font-size: 40px;
    font-weight: 400;
    color: $brand-secondary;
  }

  details[open] summary::after {
    content: '–';
    font-size: 40px;
    font-weight: 400;
    color: $brand-secondary;
  }

  details p {
    margin: 10px 0 0;
  }
}
  • URL: /components/raw/accordion/_accordion.scss
  • Filesystem Path: components/04-molecules/accordion/_accordion.scss
  • Size: 723 Bytes

No notes defined.