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

<%@ 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" />
<p>
    <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>
</p>

Size

Accordéon taille sm

Accordéon taille md

Accordéon taille lg

Accordéon taille xl

Apparence

Accordéon apparence level-1

Accordéon apparence level-2

Accordéon apparence ouvert par défaut

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="Size" level="3" />
<p>
    <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>
</p>
<p>
    <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>
</p>
<p>
    <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>
</p>
<p>
    <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>
</p>

<kuik:heading size="lg" skin="a" title="Apparence" level="3" />
<p>
    <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>
</p>
<p>
    <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>
</p>
<p>
    <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>
</p>

<kuik:heading size="lg" skin="a" title="Accordeons imbriqués" level="3" />
<p>
    <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">
                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 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>
</p>

Name	Type	Required	Description
title	java.lang.String	true	Titre de l'accordéon
size	java.lang.String	false	Taille (défaut : sm)
level	java.lang.String	false	Apparence (défault : 1)
open	java.lang.Boolean	false	ouvert à l'affichage (défaut : false)

.accordion {
  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 {
  background-color: var(--accordion-background-color);
  color: var(--accordion-title-color);
  cursor: pointer;
  list-style: none;
  padding: var(--accordion-padding-v) var(--accordion-padding-h);

  &:hover {
    background-color: var(--accordion-title-hover-background-color);
    color: var(--accordion-title-hover-color);
  }
}

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

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

.accordion__icon--close {
  display: none;
}

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

.accordion[open] > .accordion__summary {
  .accordion__icon--close {
    display: inline-block;
  }

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

.accordion__title {
  font-size: var(--accordion-title-font-size);
  font-weight: var(--font-weight-700);
  line-height: var(--accordion-title-line-height);
  vertical-align: middle;
}

.accordion__content {
  background-color: var(--accordion-background-color);
  padding: var(--accordion-padding-v) var(--accordion-padding-h);

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

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

// Level 1

.accordion--level-1 {
  --accordion-background-color: var(--color1-10);
  --accordion-title-color: var(--color1-80);
  --accordion-title-hover-background-color: var(--color1-90);
  --accordion-title-hover-color: var(--white);
}

.accordion--level-1[open] {
  --accordion-background-color: var(--white);
}

.accordion--level-1.accordion--sm {
  --accordion-padding-h: var(--space-3);
  --accordion-padding-v: var(--space-2);
  --accordion-icon-margin: var(--space-3);
  --accordion-title-font-size: var(--font-size-50);
  --accordion-title-line-height: 130%;
}

.accordion--level-1.accordion--md {
  --accordion-padding-h: var(--space-3);
  --accordion-padding-v: var(--space-3);
  --accordion-icon-margin: var(--space-3);
  --accordion-title-font-size: var(--font-size-50);
  --accordion-title-line-height: 130%;
}

.accordion--level-1.accordion--lg {
  --accordion-padding-h: var(--space-4);
  --accordion-padding-v: var(--space-4);
  --accordion-icon-margin: var(--space-4);
  --accordion-title-font-size: var(--font-size-50);
  --accordion-title-line-height: 130%;
}

.accordion--level-1.accordion--xl {
  --accordion-padding-h: var(--space-4);
  --accordion-padding-v: var(--space-4);
  --accordion-icon-margin: var(--space-4);
  --accordion-title-font-size: var(--font-size-70);
  --accordion-title-line-height: 130%;
}

// Level 2

.accordion--level-2 {
  --accordion-background-color: var(--color1-20);
  --accordion-title-color: var(--color1-80);
  --accordion-title-hover-background-color: var(--color1-90);
  --accordion-title-hover-color: var(--white);
}

.accordion--level-2.accordion--sm {
  --accordion-padding-h: var(--space-1);
  --accordion-padding-v: var(--space-1);
  --accordion-icon-margin: var(--space-2);
  --accordion-title-font-size: var(--font-size-40);
  --accordion-title-line-height: 150%;
}

.accordion--level-2.accordion--md {
  --accordion-padding-h: var(--space-2);
  --accordion-padding-v: var(--space-2);
  --accordion-icon-margin: var(--space-3);
  --accordion-title-font-size: var(--font-size-40);
  --accordion-title-line-height: 150%;
}

.accordion--level-2.accordion--lg {
  --accordion-padding-h: var(--space-3);
  --accordion-padding-v: var(--space-3);
  --accordion-icon-margin: var(--space-4);
  --accordion-title-font-size: var(--font-size-50);
  --accordion-title-line-height: 150%;
}

.accordion--level-2.accordion--xl {
  --accordion-padding-h: var(--space-3);
  --accordion-padding-v: var(--space-3);
  --accordion-icon-margin: var(--space-4);
  --accordion-title-font-size: var(--font-size-50);
  --accordion-title-line-height: 130%;
}

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ attribute name="title" required="true" type="java.lang.String" description="Titre de l'accordéon" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="level" required="false" type="java.lang.String" description="Apparence (défault : 1)" %>
<%@ attribute name="open" required="false" type="java.lang.Boolean" description="ouvert à l'affichage (défaut : false)" %>

<c:if test="${empty pageScope.size}">
    <c:set var="size" value="sm"/>
</c:if>

<c:if test="${empty pageScope.level}">
    <c:set var="level" value="1"/>
</c:if>

<c:set var="classes" value="accordion accordion--level-${pageScope.level} accordion--${pageScope.size}"/>
<c:set var="iconOpen" value="icon://accordion/level-${pageScope.level}--open"/>
<c:set var="iconClose" value="icon://accordion/level-${pageScope.level}--close"/>

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set var="classes" value="${classes} ${a.value}"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<jsp:doBody var="body"/>
<c:if test="${not empty fn:trim(pageScope.body)}">
<details class="${pageScope.classes}" ${pageScope.attributes} ${open ? "open" :""}>
    <summary class="accordion__summary">
        <span class="accordion__icon accordion__icon--open">
            <kuik:icon title="" source="${pageScope.iconOpen}" />
        </span>
        <span class="accordion__icon accordion__icon--close">
            <kuik:icon title="" source="${pageScope.iconClose}" />
        </span>
        <span class="accordion__title"><c:out value="${pageScope.title}"/></span>
    </summary>
    <div class="accordion__content">${pageScope.body}</div>
</details>
</c:if>