Composants

Accordéon - Accordion

Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page.

Version du composant : 1

Structure

Un accordéon est constitué des éléments suivants :

  • un en-tête, correspondant au titre de la section - obligatoire.
  • un chevron orienté vers le bas indique que le panneau peut s'ouvrir. Il est orienté vers le haut quand le panneau peut se refermer - obligatoire.
  • un séparateur - obligatoire
  • une zone de contenu, masqué par défaut pouvant contenir tout type d'élément - obligatoire.

Le groupement d'élèves Ambassadeurs pHARe est un groupe composés d'élèves de collèges et lycées français.

Basées dans plusieurs délégations locales et délégations académiques, nous sommes présents et souhaitons étendre le plus possible notre action.

Nom de l'accordéon

Nom de l'accordéon

Contenu de l'accordéon.


<div class="accordion">
    <div class="accordion-header">
        <div class="accordion-titre">
            <h3>Nom de l'accordéon</h3>
        </div>
        <div class="accordion-chevron">
            <i class="fa-solid fa-chevron-down></i>
        </div>
    </div>
    <hr>
    <div class="accordion-content">
        <h3>Nom de l'accordéon</h3>
        <p>Contenu de l'accordéon.</p>
    </div>
</div>

Groupes d'accordéons

Nom de l'accordéon

Nom de l'accordéon

Contenu de l'accordéon.

Nom de l'accordéon

Nom de l'accordéon

Contenu de l'accordéon.


<div class="accordion">
    <div class="accordion-header">
        <div class="accordion-titre">
            <h3>Nom de l'accordéon</h3>
        </div>
        <div class="accordion-chevron">
            <i class="fa-solid fa-chevron-down></i>
        </div>
    </div>
    <hr>
    <div class="accordion-content">
        <h3>Nom de l'accordéon</h3>
        <p>Contenu de l'accordéon.</p>
    </div>
</div>
<div class="accordion">
    <div class="accordion-header">
        <div class="accordion-titre">
            <h3>Nom de l'accordéon</h3>
        </div>
        <div class="accordion-chevron">
            <i class="fa-solid fa-chevron-down></i>
        </div>
    </div>
    <hr>
    <div class="accordion-content">
        <h3>Nom de l'accordéon</h3>
        <p>Contenu de l'accordéon.</p>
    </div>
</div>

Par défaut, les accordéons sont fermés et comprennent l’en tête et le chevron.

La totalité de la barre de titre est cliquable. En cliquant sur le titre ou l’icône , le contenu est révélé ou caché et le chevron change d'orientation.