<details class="supt-accordion" name="accordion" open="true">
<summary>
<span>Accordion Title</span>
<svg class="supt-icon-chevron " xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</summary>
<div class="supt-accordion__body">
<p>This is the body content for the <b>accordion</b>. Lorem ipsum dolor sit amet, <a href='#'>consectetur</a> adipiscing elit.</p>
</div>
</details>
No notes defined.
<details class="supt-accordion" {{attributes|attrs}}>
<summary>
<span>{{ title }}</span>
{% include "02-icons/chevron-icon.twig" %}
</summary>
<div class="supt-accordion__body">
{{ body }}
</div>
</details>
{
"title": "Accordion Title",
"body": "<p>This is the body content for the <b>accordion</b>. Lorem ipsum dolor sit amet, <a href='#'>consectetur</a> adipiscing elit.</p>",
"attributes": {
"name": "accordion",
"open": true
}
}
.supt-accordion {
width: 100%;
/* inline-size: 50ch; */
@media (prefers-reduced-motion: no-preference) {
interpolate-size: allow-keywords;
}
summary {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: $spacing-5;
padding: $spacing-4 $spacing-1-5;
color: $color-black;
border-top: 1px solid $color-grey-2;
@media (min-width: $breakpoint-md) {
gap: $spacing-8;
padding-block: $spacing-5;
}
&::before {
content: '';
position: absolute;
top: -1px;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: $color-main;
transform: scaleX(0);
transform-origin: left;
transition: transform $transition-fast ease-in-out;
z-index: 2;
}
span {
@extend %t-sm;
font-weight: $font-weight-medium;
}
svg {
width: 12px;
height: 12px;
transition: transform $transition-fast ease-in-out;
@media (min-width: $breakpoint-md) {
width: 16px;
height: 16px;
}
}
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&:focus-visible {
color: $color-medium;
}
&:focus {
outline: none;
box-shadow: none;
}
}
&__body {
padding: 0 $spacing-8 $spacing-6 $spacing-1-5;
@media (min-width: $breakpoint-md) {
padding-right: $spacing-12;
padding-bottom: $spacing-8;
}
p {
@extend %paragraph;
color: $color-grey-5;
}
}
&::details-content {
opacity: 0;
block-size: 0;
overflow-y: clip;
transition:
content-visibility $transition-fast allow-discrete ease-in-out,
opacity $transition-fast ease-in-out,
block-size $transition-fast ease-in-out;
}
&[open] {
summary {
color: $color-main;
&::before {
transform: scaleX(1);
}
svg {
transform: rotate(-180deg);
}
&:focus-visible {
color: $color-medium;
&::before {
background-color: $color-medium;
}
}
}
&::details-content {
opacity: 1;
block-size: auto;
}
}
&:last-child {
border-bottom: 1px solid $color-grey-2;
}
}