Accordéon - Système de design

Accordéon dans un accordéon

Contenu

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

list item

Groupes d‘accordéons dans des groupes d‘accordéons

Contenu

list item

Contenu

list item

Contenu

list item
list item

Contenu

list item

Contenu

list item
- list item niveau 2
list item

Contenu

list item
list item

Contenu

list item
- list item niveau 2
list item
- list item niveau 2
- list item niveau 2

Contenu

list item

Contenu

list item
- list item niveau 2
- list item niveau 2
list item
- list item niveau 2

Contenu

list item

Contenu

list item
- list item niveau 2
- list item niveau 2

Contenu

list item
- list item niveau 2
list item

Contenu

list item
- list item niveau 2
list item

Contenu

list item
list item

Contenu

list item
list item

Contenu

list item
list item
- list item niveau 2
- list item niveau 2

Contenu

list item
- list item niveau 2
- list item niveau 2

Contenu

list item

Contenu

list item
list item
- list item niveau 2
- list item niveau 2

Contenu

list item
- list item niveau 2
- list item niveau 2

Contenu

list item
- list item niveau 2
- list item niveau 2
list item
- list item niveau 2
- list item niveau 2

Contenu

list item
- list item niveau 2
- list item niveau 2

Contenu

list item
list item
- list item niveau 2

Contenu

list item

Contenu

list item
- list item niveau 2
- list item niveau 2

Contenu

list item
- list item niveau 2

Contenu

list item
list item
- list item niveau 2

Contenu

list item
list item

Contenu

list item
list item

Contenu

list item

Contenu

list item
- list item niveau 2

Contenu

list item
- list item niveau 2

Contenu

list item
list item
- list item niveau 2
- list item niveau 2

Contenu

list item

Contenu

list item
- list item niveau 2

Contenu

list item
list item

<div class="fr-accordions-group">
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1120">Libellé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-1120">
            <div class="fr-accordions-group">
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1114">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1114">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1115">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1115">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1116">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1116">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1117">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1117">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1118">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1118">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1119">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1119">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1127">Libellé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-1127">
            <div class="fr-accordions-group">
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1121">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1121">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1122">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1122">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1123">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1123">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1124">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1124">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1125">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1125">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1126">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1126">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1134">Libellé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-1134">
            <div class="fr-accordions-group">
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1128">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1128">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1129">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1129">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1130">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1130">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1131">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1131">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1132">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1132">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1133">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1133">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1141">Libellé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-1141">
            <div class="fr-accordions-group">
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1135">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1135">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1136">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1136">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1137">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1137">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1138">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1138">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1139">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1139">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1140">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1140">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1148">Libellé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-1148">
            <div class="fr-accordions-group">
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1142">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1142">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1143">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1143">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1144">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1144">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1145">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1145">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1146">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1146">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1147">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1147">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1155">Libellé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-1155">
            <div class="fr-accordions-group">
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1149">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1149">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1150">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1150">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1151">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1151">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1152">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1152">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1153">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1153">
                        <!-- données de test -->
                    </div>
                </section>
                <section class="fr-accordion">
                    <h3 class="fr-accordion__title">
                        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1154">Libellé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-1154">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
</div>

Système d’onglets dans un accordéon

Contenu 1

list item

Contenu 2

list item
list item

<section class="fr-accordion">
    <h3 class="fr-accordion__title">
        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1160">Libellé accordéon</button>
    </h3>
    <div class="fr-collapse" id="accordion-1160">
        <div class="fr-tabs">
            <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                <li role="presentation">
                    <button id="tabpanel-1161" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-1161-panel">Libellé onglet 1</button>
                </li>
                <li role="presentation">
                    <button id="tabpanel-1162" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-1162-panel">Libellé onglet 2</button>
                </li>
            </ul>
            <div id="tabpanel-1161-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-1161" tabindex="0">
                <!-- données de test -->
            </div>
            <div id="tabpanel-1162-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-1162" tabindex="0">
                <!-- données de test -->
            </div>
        </div>
    </div>
</section>

Accordéon (accordion)

Accordéon dans un accordéon

Libellé accordéon

Libellé accordéon

Contenu

Groupes d‘accordéons dans des groupes d‘accordéons

Libellé accordéon

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu

Libellé accordéon

Contenu