Hexa PAGE - Classes - Section déroulante

Cet élément est identifié par la propriété data-hx="drop-down".

Une section déroulante est constituée :

• d'un conteneur englobant la section : généralement un élément <section> ou <div>
• d'un titre de section : généralement un élément <h1>..<h6> ou tout autre élément ;
  il reste toujours visible
• du contenu de la section : divers éléments constituant le contenu de la section ;
  il s'affiche suivant une action effectuée sur le titre

Déroulement par sélection du titre

<section>
<input type="checkbox" id="id_section" data-hx="drop-down" class="hx-display">
<label for="id_section"><h2>Titre de la section</h2></label>
<p>1er paragraphe</p>
<p>2ème paragraphe</p>
</section>

ou

<section>
<input type="checkbox" id="id_section" data-hx="drop-down" class="hx-display">
<h2><label for="id_section">Titre de la section</label></h2>
<p>1er paragraphe</p>
<p>2ème paragraphe</p>
</section>

Dans ce cas de figure, le contenu de la section est affiché ou caché lorsque l'internaute clique sur le titre.

Cette configuration nécessite l'utilisation d'une case à cocher invisible (<input type="checkbox ...">) qui enregistre l'action.

Le lien entre la cache à cocher et le titre se situe dans les propriétés id="id_section" et for="id_section". Chaque section déroulante doit comporter un lien unique.

Les éditeurs tels que ckEditor utilisé avec Hexa CMS ne reconnaissent que <label> inclut dans <h2>.

Tous les éléments de la section suivant le titre sont affichés ou cachés lorsque le titre est sélectionné par pression.

Déroulement par survol du titre

<section>
<h2 data-hx="drop-down" class="hx-display-hover">Titre de la section</h2>
<p>1er paragraphe</p>
<p>2ème paragraphe</p>
</section>

 Le contenu de la section est affiché lorsque le titre est survolé ou pressé dans le cas des écrans tactiles.

Les indicateurs d'ouverture

Par défaut, le titre d'une section fermée est précédé d'un "+" et d'un "-" dans l'autre cas.

• hx-plus-cross :
  • "+" devant le titre de la section fermée
  • "x" devant le titre de la section ouverte