Accordéon

Zone de texte résumée pouvant être déployée pour en découvrir les détail

Classes du composant

Modificateurs de tailles

.accordion--sm : Small
.accordion--md : Medium
.accordion--lg : Large
.accordion--xl : Extra-large

Modificateurs d'affichage

.accordion--level-1 : Niveau 1
.accordion--level-2 : Niveau 2

En ajoutant l'attribut open="true", l'accordeon sera ouvert par défaut.

Size

Accordéon taille sm

Accordéon taille md

Accordéon taille lg

Accordéon taille xl

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>

<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Size" level="3"/>
<kuik:accordion title="Accordéon taille sm" size="sm">
    Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
    Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
</kuik:accordion>

<kuik:accordion title="Accordéon taille md" size="md">
    Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
    Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
</kuik:accordion>

<kuik:accordion title="Accordéon taille lg" size="lg">
    Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
    Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
</kuik:accordion>

<kuik:accordion title="Accordéon taille xl" size="xl">
    Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
    Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
</kuik:accordion>

Apparence

Accordéon apparence level-1

Accordéon apparence level-2

Accordéon apparence ouvert par défaut

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Apparence" level="3"/>

<kuik:accordion title="Accordéon apparence level-1">
    Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
    Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
</kuik:accordion>

<kuik:accordion title="Accordéon apparence level-2" level="2">
    Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
    Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
</kuik:accordion>

<kuik:accordion title="Accordéon apparence ouvert par défaut" open="true">
    Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
    Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
</kuik:accordion>

Accordeons imbriqués

Accordéon parent

Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod. Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna. Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod. Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.

Accordéon enfant 1

Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.

Accordéon enfant 2

Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.

Accordéon petit-enfant 1

Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.

Accordéon petit-enfant 2

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Accordeons imbriqués" level="3"/>

<kuik:accordion title="Accordéon parent">
    <p>Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
        Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
        Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
        Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.</p>
    <kuik:accordion title="Accordéon enfant 1" level="2">
        Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
        Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
    </kuik:accordion>
    <p>Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.</p>
    <kuik:accordion title="Accordéon enfant 2" level="2">
        <p>Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget
            euismod.</p>
        <kuik:accordion title="Accordéon petit-enfant 1" level="2">
            <p>
                Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget
                euismod.
                Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
            </p>
        </kuik:accordion>
        <p>Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget
            euismod.</p>
        <kuik:accordion title="Accordéon petit-enfant 2" level="2">
            Enim vivamus quam eu ac accumsan felis portaest placerat suspendisse nisi et varius condimentum nulla rutrum maximus euismod nisi bibendum massa cursus nec eget euismod.
            Aliquam tristique purus nisi sit mi euismod adipiscing sem quisque leo nisi felis nulla nunc tincidunt fusce magna arcu nisl consectetur nec sit quis urna.
        </kuik:accordion>
    </kuik:accordion>
</kuik:accordion>

Accordéon vide

Avant Après

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:heading size="lg" skin="a" title="Accordéon vide" level="3"/>

Avant
<kuik:accordion title="Titre ignoré">
</kuik:accordion>
Après

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<c:if test="${requestScope.__accordionStep eq 'accordionHeader'}">
    <jsp:doBody />
</c:if>

@use 'mixins/mixins-customizables' as custom;

$prefix: 'accordion';
$prefix-summary: 'accordion__summary';
$prefix-content: 'accordion__content';

.accordion {
    @include custom.component($prefix, true);

    border-bottom: var(--line-thin) var(--color1-30);

    &:not(:first-child) {
        margin-block-start: var(--space-6);
    }

    &:not(:last-child) {
        margin-block-end: var(--space-6);
    }

    + .accordion {
        margin-block-start: calc(var(--space-6) * -1); // Annulation de la marge supérieure pour coller 2 accordéons successifs
    }
}

.accordion__summary {
    @include custom.component($prefix-summary, true);

    align-items: center;
    cursor: pointer;
    display: flex;
    list-style: none;

    &:hover {
        @include custom.component($prefix-summary);
    }
}

.accordion__icon {
    @include custom.icon;

    margin-inline-end: var(--accordion-icon-margin);
    vertical-align: middle;

    svg {
        height: var(--size-6);
        vertical-align: top;
        width: var(--size-6);
    }

    &:hover {
        @include custom.icon;
    }
}

.accordion__icon--close {
    display: none;
}

.accordion__icon--open {
    display: inline-block;
}

.accordion[open] > .accordion__summary {
    .accordion__icon {
        @include custom.icon;
    }

    .accordion__icon--close {
        display: inline-block;
    }

    .accordion__icon--open {
        display: none;
    }
}

.accordion__title {
    vertical-align: middle;
}

.accordion__content {
    @include custom.component($prefix-content, true);

    > :first-child {
        margin-block-start: var(--space-0);
    }

    > :last-child {
        margin-block-end: var(--space-0);
    }
}

@for $level from 1 through 2 {

    .accordion--level-#{$level} {
        @include custom.component($prefix);

        &:hover {
            @include custom.component($prefix);
        }

        .accordion__summary {
            @include custom.component($prefix-summary);

            .icon {
                @include custom.icon;
            }

            &:hover {
                @include custom.component($prefix-summary);

                .icon {
                    @include custom.icon;
                }
            }
        }

        .accordion__content {
            @include custom.component($prefix-content);
        }
    }

    .accordion--level-#{$level}[open] {
        @include custom.component($prefix);

        .accordion__summary {
            @include custom.component($prefix-summary);

            .icon {
                @include custom.icon;
            }

            &:hover {
                @include custom.component($prefix-summary);

                .icon {
                    @include custom.icon;
                }
            }
        }

        .accordion__content {
            @include custom.component($prefix-content);
        }
    }

    @each $size in 'sm', 'md', 'lg', 'xl' {
        .accordion--level-#{$level}.accordion--#{$size} {
            @include custom.component($prefix);

            .accordion__summary {
                @include custom.component($prefix-summary);

                .icon {
                    @include custom.icon;
                }
            }

            .accordion__content {
                @include custom.component($prefix-content);
            }
        }
    }
}