Accordion¶

Styles for an accordion used in h-accordion webcomponent.

Structurally .accordion contains following elements:

.accordion__toggler
.accordion__toggler-icon

It also contains two animation classes added automatically to the webcomponent:

.accordion-toggle-transition-start
.accordion-toggle-transition-end

Example¶

Here is an example of product accordion element usage.

HTML

<h-accordion class="accordion">
    <h-accordion-group opened>
        <h-accordion-toggler class="accordion__toggler">
            Toggler
            <svg class="accordion__toggler-icon icon">
                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
            </svg>
        </h-accordion-toggler>

        <h-accordion-content class="accordion-toggle-transition-end">Content</h-accordion-content>
    </h-accordion-group>
</h-accordion>

Accordion tags¶

The .accordion classes were designed to be used with block elements like <h-accordion>. However, you can use them with any other element and customize it to your own needs.

LESS¶

You can modify any accordion less variable in your User Less section to change accordion styles.

Accordion styles¶

Here are standard accordion styles.

.accordion {
    &__toggler {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:not([aria-disabled='true']) {
            cursor: pointer;
        }

        &-icon {
            transition: transform 0.2s ease-in-out;
        }

        &[aria-expanded='true'] {
            .accordion__toggler-icon {
                transform: rotate(180deg);
            }
        }
    }

    &-toggle-transition {
        &-start {
            opacity: 0;
        }

        &-end {
            opacity: 1;
        }
    }
}

h-accordion-content {
    transition: opacity 0.2s ease-in, transform 0.2s ease-out, height 0.2s ease-in;
    display: block;
    overflow: hidden;

    &.accordion-content {
        &_container {
            container-type: inline-size;
        }
    }
}

Webcomponents reference¶

h-accordion