Swegon Component Library

Accordion: Default 

<div class="accordion-list--large">
    <div class="accordion ">
        <button class="accordion__button" aria-controls="lorem-ipsum-dolor-sit-amet" aria-expanded="false">
            Lorem ipsum dolor sit amet
            <svg class="icon accordion__icon" focusable="false">
                <use xlink:href="#icon-chevron-down"></use>
            </svg>
        </button>

        <div class="accordion__content" id="lorem-ipsum-dolor-sit-amet" aria-hidden="true" aria-labelledby="lorem-ipsum-dolor-sit-amet">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum mattis arcu at sollicitudin. Aenean quis ante bibendum, suscipit enim et, pharetra arcu. Proin eleifend laoreet est, eu fermentum leo porttitor non. Donec id ex mauris. Nam elementum tellus ante, quis tincidunt tortor volutpat ut. Etiam ut nibh eget est semper lacinia. Sed non justo eu leo dignissim consectetur pulvinar sed arcu. Etiam at metus vel turpis mattis commodo ac eu ligula. Etiam convallis mauris sem, a gravida ex finibus eu. Etiam eu pulvinar lorem, eu dictum orci. Aliquam eros sapien, commodo non nulla sed, venenatis rhoncus tortor. Aenean non ipsum id mauris fermentum rutrum. Vestibulum aliquam at eros condimentum euismod. Etiam ut lorem euismod, porttitor dui ac, maximus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </div>
    </div>
    <div class="accordion ">
        <button class="accordion__button" aria-controls="klio" aria-expanded="false">
            Lorem ipsum dolor sit amet
            <svg class="icon accordion__icon" focusable="false">
                <use xlink:href="#icon-chevron-down"></use>
            </svg>
        </button>

        <div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum mattis arcu at sollicitudin. Aenean quis ante bibendum, suscipit enim et, pharetra arcu. Proin eleifend laoreet est, eu fermentum leo porttitor non. Donec id ex mauris. Nam elementum tellus ante, quis tincidunt tortor volutpat ut. Etiam ut nibh eget est semper lacinia. Sed non justo eu leo dignissim consectetur pulvinar sed arcu. Etiam at metus vel turpis mattis commodo ac eu ligula. Etiam convallis mauris sem, a gravida ex finibus eu. Etiam eu pulvinar lorem, eu dictum orci. Aliquam eros sapien, commodo non nulla sed, venenatis rhoncus tortor. Aenean non ipsum id mauris fermentum rutrum. Vestibulum aliquam at eros condimentum euismod. Etiam ut lorem euismod, porttitor dui ac, maximus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </div>
    </div>
    <div class="accordion ">
        <button class="accordion__button" aria-controls="eurur" aria-expanded="false">
            Lorem ipsum dolor sit amet
            <svg class="icon accordion__icon" focusable="false">
                <use xlink:href="#icon-chevron-down"></use>
            </svg>
        </button>

        <div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum mattis arcu at sollicitudin. Aenean quis ante bibendum, suscipit enim et, pharetra arcu. Proin eleifend laoreet est, eu fermentum leo porttitor non. Donec id ex mauris. Nam elementum tellus ante, quis tincidunt tortor volutpat ut. Etiam ut nibh eget est semper lacinia. Sed non justo eu leo dignissim consectetur pulvinar sed arcu. Etiam at metus vel turpis mattis commodo ac eu ligula. Etiam convallis mauris sem, a gravida ex finibus eu. Etiam eu pulvinar lorem, eu dictum orci. Aliquam eros sapien, commodo non nulla sed, venenatis rhoncus tortor. Aenean non ipsum id mauris fermentum rutrum. Vestibulum aliquam at eros condimentum euismod. Etiam ut lorem euismod, porttitor dui ac, maximus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </div>
    </div>
    <div class="accordion ">
        <button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
            Lorem ipsum dolor sit amet
            <svg class="icon accordion__icon" focusable="false">
                <use xlink:href="#icon-chevron-down"></use>
            </svg>
        </button>

        <div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum mattis arcu at sollicitudin. Aenean quis ante bibendum, suscipit enim et, pharetra arcu. Proin eleifend laoreet est, eu fermentum leo porttitor non. Donec id ex mauris. Nam elementum tellus ante, quis tincidunt tortor volutpat ut. Etiam ut nibh eget est semper lacinia. Sed non justo eu leo dignissim consectetur pulvinar sed arcu. Etiam at metus vel turpis mattis commodo ac eu ligula. Etiam convallis mauris sem, a gravida ex finibus eu. Etiam eu pulvinar lorem, eu dictum orci. Aliquam eros sapien, commodo non nulla sed, venenatis rhoncus tortor. Aenean non ipsum id mauris fermentum rutrum. Vestibulum aliquam at eros condimentum euismod. Etiam ut lorem euismod, porttitor dui ac, maximus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </div>
    </div>
</div>
 
<div class="accordion-list--large">
<div class="accordion {{getmodifiers modifiers "accordion"}}">
    <button class="accordion__button" aria-controls="{{id}}" aria-expanded="{{expanded}}">
        {{title}}
        {{#if counter}}
            <div class="accordion__counter">{{counter}}</div>
        {{/if}}
        {{> @icon id='chevron-down' additionalClasses="accordion__icon"}}
    </button>

    <div class="accordion__content" id="{{id}}" aria-hidden="{{#if expanded}}false{{else}}true{{/if}}" aria-labelledby="{{id}}">
        {{#>@partial-block}}
            {{{body}}}
        {{/@partial-block}}
    </div>
</div>
<div class="accordion {{getmodifiers modifiers "accordion"}}">
    <button class="accordion__button" aria-controls="klio" aria-expanded="{{expanded}}">
        {{title}}
        {{#if counter}}
            <div class="accordion__counter">{{counter}}</div>
        {{/if}}
        {{> @icon id='chevron-down' additionalClasses="accordion__icon"}}
    </button>

    <div class="accordion__content" id="klio" aria-hidden="{{#if expanded}}false{{else}}true{{/if}}" aria-labelledby="klio">
        {{#>@partial-block}}
            {{{body}}}
        {{/@partial-block}}
    </div>
</div>
<div class="accordion {{getmodifiers modifiers "accordion"}}">
    <button class="accordion__button" aria-controls="eurur" aria-expanded="{{expanded}}">
        {{title}}
        {{#if counter}}
            <div class="accordion__counter">{{counter}}</div>
        {{/if}}
        {{> @icon id='chevron-down' additionalClasses="accordion__icon"}}
    </button>

    <div class="accordion__content" id="eurur" aria-hidden="{{#if expanded}}false{{else}}true{{/if}}" aria-labelledby="eurur">
        {{#>@partial-block}}
            {{{body}}}
        {{/@partial-block}}
    </div>
</div>
<div class="accordion {{getmodifiers modifiers "accordion"}}">
    <button class="accordion__button" aria-controls="iuhrere" aria-expanded="{{expanded}}">
        {{title}}
        {{#if counter}}
            <div class="accordion__counter">{{counter}}</div>
        {{/if}}
        {{> @icon id='chevron-down' additionalClasses="accordion__icon"}}
    </button>

    <div class="accordion__content" id="iuhrere" aria-hidden="{{#if expanded}}false{{else}}true{{/if}}" aria-labelledby="iuhrere">
        {{#>@partial-block}}
            {{{body}}}
        {{/@partial-block}}
    </div>
</div>
</div>
 
{
  "title": "Lorem ipsum dolor sit amet",
  "id": "lorem-ipsum-dolor-sit-amet",
  "expanded": false,
  "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum mattis arcu at sollicitudin. Aenean quis ante bibendum, suscipit enim et, pharetra arcu. Proin eleifend laoreet est, eu fermentum leo porttitor non. Donec id ex mauris. Nam elementum tellus ante, quis tincidunt tortor volutpat ut. Etiam ut nibh eget est semper lacinia. Sed non justo eu leo dignissim consectetur pulvinar sed arcu. Etiam at metus vel turpis mattis commodo ac eu ligula. Etiam convallis mauris sem, a gravida ex finibus eu. Etiam eu pulvinar lorem, eu dictum orci. Aliquam eros sapien, commodo non nulla sed, venenatis rhoncus tortor. Aenean non ipsum id mauris fermentum rutrum. Vestibulum aliquam at eros condimentum euismod. Etiam ut lorem euismod, porttitor dui ac, maximus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>"
}
  • Content: 
    .accordion {
    margin: 2px 0;
    transition: margin .15s ease-out;
    position: relative;

    &--open {
        margin: size(2) 0;

        &.accordion--no-animation {
            margin: 2px 0;
        }
    }

    &.accordion--large {
        .accordion__icon {
            left: 0;
            right: unset;
            width: 24px;
            height: 24px;
            top: 15px;

            @include breakpoint($m) {
                top: 27px;
            }
        }



        .accordion__button {
            padding: 16px 16px 16px 32px;
            font-size: size(2);
            line-height: size(3);
            background-color: transparent;


            @include breakpoint($m) {
                padding: 24px 32px 24px 40px;
                line-height: size(4);
            }
        }

        .accordion__content {
            padding: 24px 0 20px 0;
            background-color: transparent;
        }
    }
}

.accordion-list--large {
    button {
        border-bottom: 1px solid $color-gray-2;
    }

    div:last-child {
        button:not([aria-expanded="true"]) {
            border-bottom: none;
        }
    }

}

.accordion-list {
    border: 1px solid $color-gray-2;

    .accordion:not(:last-child) {
        border-bottom: 1px solid $color-gray-2;
    }
}

.filters-accordion-list {
    border: 1px solid $color-gray-1;

    .accordion:not(:last-child) {
        border-bottom: 1px solid $color-gray-1;
    }

    .accordion__content {
        border-top: 1px solid $color-gray-1;
        padding: size(2.5) size(2) size(2.5);

        @include breakpoint($l) {
            padding: size(2.5) size(4) size(2.5);
        }
    }
}

.accordion__button {
    position: relative;
    background: $color-white;
    color: $color-black;
    width: 100%;
    padding: size(2.5) size(6) size(2.5) size(2);
    font-size: size(2);
    font-weight: $font-weight-bold;
    line-height: size(3);
    text-align: left;
    cursor: pointer;

    @include breakpoint($l) {
        padding: size(2.5) size(8) size(2.5) size(4);
    }

    .accordion--with-counter & {
        display: flex;
        justify-content: space-between;
    }
}

.accordion__icon {
    fill: $color-black;
    position: absolute;
    top: size(3);
    right: size(2);
    width: size(2);
    height: size(2);

    @include breakpoint($l) {
        right: size(3);
        width: size(2.5);
        height: size(2.5);
    }

    &-inner {
        right: 0;

        @include breakpoint($l) {
            right: -7px;
        }
    }

    .accordion__button[aria-expanded="true"] & {
        transform: rotate(180deg);
    }
}

.accordion__content {
    display: none;
    background: $color-white;
    padding: size(1) size(2) size(2.5);

    @include breakpoint($l) {
        padding: size(1) size(4) size(2.5);
    }

    p:last-child {
        margin-bottom: 0;
    }

    &[aria-hidden="false"] {
        display: block;
    }

    &-level-1 {

        @include breakpoint($s) {
            margin-left: 32px;
        }

        .accordion__button {
            font-weight: $font-weight-normal;
        }
    }

    &-level-2 {

        margin-left: 16px;
        margin-right: 16px;

        @include breakpoint($s) {
            margin-left: 32px;
            margin-right: 32px;
        }

        .accordion__button {
            font-weight: $font-weight-normal;
        }
    }
}

.accordion__counter {
    min-width: 24px;
    height: 24px;
    color: $color-white;
    background: $color-green-dark;
    border-radius: 100px;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
    padding: 1px 6px 0;
    flex-shrink: 0;
    margin-left: 10px;

    .accordion--with-counter & {
        display: inline-flex;
    }
}
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: src/components/accordion/accordion.scss
  • Size: 3.8 KB
  • Content: 
    import { gsap } from 'gsap';
import isInViewport from '../../functions/isInViewport';
const els = document.querySelectorAll('.accordion');

for (let el of els) {
    const button = el.querySelector('.accordion__button');
    const content = document.getElementById(button.getAttribute('aria-controls'));

    button.addEventListener('click', () => {
        const expanded = button.getAttribute('aria-expanded') === 'true';

        button.setAttribute('aria-expanded', !expanded);
        content.setAttribute('aria-hidden', expanded);
        expanded ? el.classList.remove('accordion--open') : el.classList.add('accordion--open');

        if (!expanded && !isInViewport(content)) {
            gsap.to(window, { duration: 0.3, scrollTo: button });
        }
    });
}
  • URL: /components/raw/accordion/index.js
  • Filesystem Path: src/components/accordion/index.js
  • Size: 772 Bytes

No notes defined.