Retour

Onglets (tab)

Le composant onglet permet aux utilisateurs de naviguer dans différentes sections de contenu au sein d’une même page.

Documentation

Onglets 4 éléments

Contenu 1

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.

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
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2

Contenu 2

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
  • list item
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu 3

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
    • list item niveau 2
    • list item niveau 2
  • list item
  • list item

Contenu 4

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.

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
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2

<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-890" class="fr-tabs__tab fr-fi-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-890-panel">Label Tab 1</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-891" class="fr-tabs__tab fr-fi-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-891-panel">Label Tab 2</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-892" class="fr-tabs__tab fr-fi-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-892-panel">Label Tab 3</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-893" class="fr-tabs__tab fr-fi-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-893-panel">Label Tab 4</button>
        </li>
    </ul>
    <div id="tabpanel-890-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-890" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-891-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-891" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-892-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-892" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-893-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-893" tabindex="0">
        <!-- données de test -->
    </div>
</div>

Onglets 2 éléments

Contenu 1

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
  • list item
  • list item

Contenu 2

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.

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
  • list item

<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-897" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-897-panel">Label Tab 1</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-898" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-898-panel">Label Tab 2</button>
        </li>
    </ul>
    <div id="tabpanel-897-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-897" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-898-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-898" tabindex="0">
        <!-- données de test -->
    </div>
</div>

Onglets dans onglets

Contenu 1

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
  • list item
  • list item

Contenu 2

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
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu 1

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.

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
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 2

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
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2

Contenu 3

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.

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
    • list item niveau 2
    • list item niveau 2
  • list item
  • list item

Contenu 1

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
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu 2

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.

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
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 3

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
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 4

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
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2

Contenu 1

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.

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
  • list item

Contenu 2

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
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 1

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
  • list item
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 2

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.

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
  • list item

Contenu 3

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.

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
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

<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-940" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-940-panel">Main Tab 0</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-941" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-941-panel">Main Tab 1</button>
        </li>
    </ul>
    <div id="tabpanel-940-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-940" tabindex="0">
        <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-930" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-930-panel">Nested Tab s0</button>
                </li>
                <li role="presentation">
                    <button id="tabpanel-931" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-931-panel">Nested Tab s1</button>
                </li>
                <li role="presentation">
                    <button id="tabpanel-932" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-932-panel">Nested Tab s2</button>
                </li>
            </ul>
            <div id="tabpanel-930-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-930" tabindex="0">
                <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-921" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-921-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-922" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-922-panel">Label Tab 2</button>
                        </li>
                    </ul>
                    <div id="tabpanel-921-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-921" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-922-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-922" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
            <div id="tabpanel-931-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-931" tabindex="0">
                <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-923" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-923-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-924" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-924-panel">Label Tab 2</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-925" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-925-panel">Label Tab 3</button>
                        </li>
                    </ul>
                    <div id="tabpanel-923-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-923" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-924-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-924" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-925-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-925" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
            <div id="tabpanel-932-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-932" tabindex="0">
                <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-926" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-926-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-927" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-927-panel">Label Tab 2</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-928" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-928-panel">Label Tab 3</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-929" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-929-panel">Label Tab 4</button>
                        </li>
                    </ul>
                    <div id="tabpanel-926-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-926" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-927-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-927" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-928-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-928" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-929-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-929" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="tabpanel-941-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-941" tabindex="0">
        <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-938" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-938-panel">Nested Tab s0</button>
                </li>
                <li role="presentation">
                    <button id="tabpanel-939" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-939-panel">Nested Tab s1</button>
                </li>
            </ul>
            <div id="tabpanel-938-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-938" tabindex="0">
                <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-933" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-933-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-934" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-934-panel">Label Tab 2</button>
                        </li>
                    </ul>
                    <div id="tabpanel-933-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-933" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-934-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-934" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
            <div id="tabpanel-939-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-939" tabindex="0">
                <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-935" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-935-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-936" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-936-panel">Label Tab 2</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-937" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-937-panel">Label Tab 3</button>
                        </li>
                    </ul>
                    <div id="tabpanel-935-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-935" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-936-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-936" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-937-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-937" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Accordéon dans onglets

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.

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
    • list item niveau 2
    • list item niveau 2
  • list item
  • list item

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
    • list item niveau 2
    • list item niveau 2
  • list item
  • list item
    • list item niveau 2
    • list item niveau 2

<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-949" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-949-panel">Label Tab 1</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-950" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-950-panel">Label Tab 2</button>
        </li>
    </ul>
    <div id="tabpanel-949-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-949" tabindex="0">
        <section class="fr-accordion">
            <h3 class="fr-accordion__title">
                <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-947">Intitulé accordéon</button>
            </h3>
            <div class="fr-collapse" id="accordion-947">
                <!-- données de test -->
            </div>
        </section>
    </div>
    <div id="tabpanel-950-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-950" tabindex="0">
        <section class="fr-accordion">
            <h3 class="fr-accordion__title">
                <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-948">Intitulé accordéon</button>
            </h3>
            <div class="fr-collapse" id="accordion-948">
                <!-- données de test -->
            </div>
        </section>
    </div>
</div>

Accordéon 100% largeur du viewport en mobile

Contenu 1

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.

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
  • list item
  • list item

Contenu 2

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
    • list item niveau 2
    • list item niveau 2
  • list item

<div class="fr-tabs fr-tabs--viewport-width">
    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
        <li role="presentation">
            <button id="tabpanel-954" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-954-panel">Label Tab 1</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-955" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-955-panel">Label Tab 2</button>
        </li>
    </ul>
    <div id="tabpanel-954-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-954" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-955-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-955" tabindex="0">
        <!-- données de test -->
    </div>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.