Besoin d'aide ?

Texte en accordéon

Que vous souhaitiez mettre en place une FAQ ou tout autre bloc de texte important, il peut être ergonomique et esthétique de mettre en place un module en accordéon. Par défaut, seuls les titres sont affiché ; le texte s'affiche alors lorsque l'on clique dessus ! Cliquez sur les titres ci-dessous pour observer le comportement du module que nous allons aborder ici :

Qui sommes-nous ?

Que faisons-nous ?

Comment le faisons-nous ?

Note :

Dans l'exemple ci-dessus, nous présentons un court module FAQ. Les textes seront entièrement personnalisables, ce qui rendra n'importe quelle application envisageable.

Le code de base

Pour mettre en place ce module, la première étape consistera naturellement à insérer un élément Widget/HTML à l'endroit souhaité, sur votre site. Insérez-y alors le code suivant :

<div id="accordeon-container">

 

</div>


Enregistrez l'élément.

Ensuite, accédez à l'onglet Paramètre > Modifier le head de votre interface, et copiez y le code suivant :

<script type="text/javascript">

function Toggle(id){

var onoff = document.getElementById("texte"+id);

if(onoff.style.display == "") {

onoff.style.display = "none";

} else {

onoff.style.display = "";

}

}

</script>


Enregistrez enfin cette nouvelle modification.

Ajout des titres et des textes

Le module inséré précédemment constituera le cadre global des textes que nous allons afficher. Il est pour le moment invisible, mais cela est tout à fait normal à ce niveau.

Insertion du premier bloc Titre + Texte

Entre ces deux lignes, nous allons insérer le code contenant un ensemble Titre & Texte à afficher :

<h3 onclick="javascript:Toggle(X)" class="tog-title">Qui sommes-nous ?</h3>

<div id="texteX" class="tog-text" style="display:none;">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices nec ex eget gravida. Nunc eleifend lacus lorem, ac maximus ex tempor eu. Phasellus elit justo, lacinia vitae quam et, ultricies vehicula nulla. Vestibulum purus nisl, placerat non convallis id, cursus et ex. Quisque mollis, ipsum et egestas elementum, tortor enim semper nunc, vitae blandit libero orci quis sem.

</p>

</div>

Dans un premier temps, copiez-collez tout ce bloc au milieu du code déjà présent dans votre élément Widget/HTML.

Penchons-nous sur ce code : repérez dans un premier temps les textes en vert et en bleu.

  • Le texte en vert sera le titre de votre section (en bleu foncé, dans l'exemple en haut de page). Préférez-le court et explicite.
  • Le texte en bleu sera le texte global de la section (en bleu clair dans l'exemple, n'apparaissant que lorsqu'on clique sur le titre).

Ces textes sont, vous l'aurez compris, entièrement personnalisables. Supprimez ce qui est présent par défaut dans notre exemple, pour y placer vos propres textes !

Si vous ne l'avez pas encore fait, enregistrez l'élément Widget/HTML : vous devriez alors observez une première version basique de votre élément. Cliquez d'ores et déjà sur le titre pour afficher le texte !

Enfin, il sera nécessaire de numéroter chaque module Titre + Texte. Repérez, dans le code ci-dessus, les 2 fois ou reviennent la mention X (en rouge dans le code par défaut). Nous venons d'insérer le 1er bloc : remplacez cette lettre par le chiffre 1 :

Ajout de blocs Titre + Texte supplémentaires

L'ajout de sections supplémentaires sera maintenant très simple : il vous suffit de reproduire la même manipulation que pour la première section, en recopiant ce même code juste en dessous du précédent. La manipulation peut être répétée à volonté :

Veillez bien, comme illustré dans l'image ci-dessus, à numéroter dans l'ordre les 2 mentions X de chaque bloc.

Enregistrez l'élément : vous devriez alors observer une version certes rustique, mais fonctionnelle, du module. Cliquez à volonté sur les titres affichés pour déployer ou rétracter le texte qui lui est assigné !

Stylisation du module

Vous remarquerez aisément que le style des polices est déjà paramétré, car dans la cohérence du contenu actuel de votre site :

  • le style des titres s'aligne sur le style prévu pour les éléments Titres de niveau 3
  • Les paragraphes sont similaire à ceux assignés aux éléments Texte.

Nous allons toutefois insérer quelques codes pour styliser le module : distinguer son style permettra de montrer qu'un évènement se produira lorsque l'on cliquera sur le titre. Sur votre site, accédez à l'onglet Paramètres > Modifier le head, afin du copier le code suivant (sous celui préalablement inséré durant la section "Le code de base") :

<style type="text/css">

.tog-title {

padding: 0 20px;

margin: 0 -20px;

background-color: rgb(109, 194, 237);

cursor: pointer;

line-height: 2em;

}


.tog-text {

background-color: rgb(201, 237, 245);

padding: 20px;

margin: 0 -20px;

}

</style>


Pour personnaliser le module, nous allons aborder les couleurs d'arrière-plan et la taille prévue pour les blocs de titre :

  • Les mentions rgb(XXX, YYY, ZZZ) en rouge sont les couleurs d'arrière plan, la première étant pour les titre et la seconde pour les textes. Pour définir la couleur que vous allez appliquer, accédez à un panneau de style pour définir une couleur. Choisissez votre couleur, puis copier le code apparaissant sous la palette. Il vous suffira alors de copier le texte sous la palette pour le renseigner à la place du code par défaut.

  • La mention 2em en bleu servira simplement à définir la hauteur des blocs de titre. Un em est une valeur arbitraire relative à la taille standard d'une police : ici, la taille du bloc sera 2 fois supérieure à la taille de la police. Pour réduire ou agrandir la hauteur du bloc titre, définissez simplement une valeur suivi de la valeur em (1em, 2em, 3em...). Les valeurs décimales sont acceptées, mais doivent être renseignées avec un point au lieu d'une virgule (1.5em, 2.7em...).
Cette fonction vous intéresse mais vous ne parvenez à l'installer sur votre site ? Rendez-vous sur notre forum ou contactez un Jimdo Expert.