<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."
}
.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;
}
}
No notes defined.