Accordéon ou onglets dans les textes de description

Avec des onglets ou un accordéon, vous structurez les longs textes de description dans une offre. Les participants n'ont alors pas à faire défiler un long texte, mais peuvent ouvrir des informations ciblées telles que l'aperçu, le programme, les prérequis ou les informations supplémentaires.

Les éléments sont insérés dans l'éditeur de description via la vue du code source. Testez ensuite toujours l'affichage dans l'aperçu, car le design, l'intégration au site web et la taille de l'écran peuvent influencer l'aspect des onglets ou des accordéons.

Quand les onglets ou les accordéons sont utiles

Les onglets conviennent lorsque plusieurs domaines de même importance sont côte à côte, par exemple aperçu, programme, responsable du cours et FAQ.
Les accordéons conviennent lorsque de nombreuses informations détaillées sont empilées verticalement, par exemple prérequis, matériel, accès, assurance et informations de paiement.
Un texte normal est préférable si la description est courte ou si les informations importantes doivent rester immédiatement visibles.

Limitez chaque description aux sections nécessaires. Trop d’onglets ou de rubriques d’accordéon peuvent rapidement surcharger une page d’offre.

Exemple d'application : description de cours compacte avec FAQ

Un cours de langue a une longue description avec le public cible, le contenu du cours, l'évaluation, le matériel et les questions fréquentes. Créez des onglets pour les contenus les plus importants et placez en dessous un accordéon avec les questions FAQ. Ainsi, les informations clés restent visibles, tandis que les détails sont ouverts au besoin.

Modifier la description dans le code source

Ouvrez l'offre souhaitée et choisissez Modifier la description. Dans l'éditeur de texte enrichi, passez à la vue du code source via le symbole </>. Insérez-y le code HTML et enregistrez ensuite la description.

Insérer des onglets pour un design Bootstrap 5.3

Les exemples suivants sont pour Bootstrap 5.3. Ouvrez la description via Textes → Description, passez à la vue du code source et insérez le bloc. Le design public doit charger les styles Bootstrap appropriés et la fonctionnalité des onglets. Un éditeur fonctionnel seul ne confirme pas l'affichage ultérieur.

<ul class="nav nav-tabs" id="kurs-tabs" role="tablist">
  <li class="nav-item" role="presentation"><button class="nav-link active" id="kurs-uebersicht-tab" data-bs-toggle="tab" data-bs-target="#kurs-uebersicht" type="button" role="tab" aria-controls="kurs-uebersicht" aria-selected="true">Vue d’ensemble</button></li>
  <li class="nav-item" role="presentation"><button class="nav-link" id="kurs-programm-tab" data-bs-toggle="tab" data-bs-target="#kurs-programm" type="button" role="tab" aria-controls="kurs-programm" aria-selected="false">Programme</button></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="kurs-uebersicht" role="tabpanel" aria-labelledby="kurs-uebersicht-tab" tabindex="0"><p>Public cible et prérequis.</p></div>
  <div class="tab-pane fade" id="kurs-programm" role="tabpanel" aria-labelledby="kurs-programm-tab" tabindex="0"><p>Contenu et déroulement.</p></div>
</div>

Chaque paire de bouton et de zone de contenu nécessite des ID uniques. Si vous dupliquez le bloc, remplacez kurs-uebersicht, kurs-programm et les ID d'onglets associés dans l'ensemble du deuxième bloc. Écrivez les prix importants, les prérequis et les délais dans une zone visible au chargement.

Insérer un accordéon pour Bootstrap 5.3

Un accordéon convient aux informations complémentaires telles que le matériel, l'accès ou les FAQ. Les boutons renvoient vers les zones de contenu respectives. data-bs-parent assure dans l'exemple que les zones appartiennent au même groupe.

<div class="accordion" id="kurs-accordion">
  <div class="accordion-item">
    <h3 class="accordion-header" id="kurs-material-titel"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kurs-material" aria-expanded="false" aria-controls="kurs-material">Que dois-je apporter ?</button></h3>
    <div id="kurs-material" class="accordion-collapse collapse" aria-labelledby="kurs-material-titel" data-bs-parent="#kurs-accordion"><div class="accordion-body">Veuillez apporter un ordinateur portable chargé.</div></div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header" id="kurs-anreise-titel"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kurs-anreise" aria-expanded="false" aria-controls="kurs-anreise">Comment trouver la salle de cours ?</button></h3>
    <div id="kurs-anreise" class="accordion-collapse collapse" aria-labelledby="kurs-anreise-titel" data-bs-parent="#kurs-accordion"><div class="accordion-body">Présentez-vous à l’accueil au rez-de-chaussée.</div></div>
  </div>
</div>

Les designs plus anciens utilisent éventuellement Bootstrap 3 et nécessitent d'autres attributs ou classes. Ne mélangez pas data-toggle et les anciennes classes panel avec l'exemple Bootstrap 5.3. Vérifiez d'abord la version du design associé sous Bootstrap 5.3 et adaptez ensuite la description de manière cohérente.

Vérifier et adapter l'affichage

Après l’enregistrement, ouvrez l’aperçu de l’offre.
Vérifiez les versions pour ordinateur et mobile. Les longs titres d’onglets peuvent passer sur plusieurs lignes sur les petits écrans.
Vérifiez si tous les liens pointent vers la bonne zone de contenu.
Adaptez les textes et les couleurs uniquement dans la mesure où la description reste bien lisible.

Les couleurs ou les espacements individuels peuvent être ajustés via CSS dans le Design Manager. Documentez ces ajustements en interne afin que les modifications ultérieures du texte de description n'endommagent pas involontairement la structure.