Sections en accordéon avec les styles CSS
Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Sections en accordéon avec les styles CSS
Cette nouvelle astuce CSS va nous apprendre à créer des sections en accordéon sur des pages Web. Il s'agit de rubriques dont seul le titre est affiché par défaut mais dont le contenu se déploie au simple clic sur la section.
Dans l'exemple illustré par la capture, trois sections sont présentées sous forme de titres, les unes sous les autres. Au clic sur l'une ou l'autre d'entre elles, le contenu se déploie pour s'afficher en repoussant plus bas la section du dessous.
Sources et présentation
Pour mener à bien cette découverte, nous suggérons d'initier les travaux à partir d'une page Web déjà structurée, notamment par les styles Css.
- Télécharger le fichier compressé accordeons-css.rar en cliquant sur ce lien,
- Puis, le décompresser dans le dossier de votre choix,
- Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,
C'est un subtil mélange entre Javascript et Css que nous allons concocter simplement pour déployer les vues et donner vie à cet accordéon.
- A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
</head>
<body>
...
La première est nommée mes-styles.css. C'est elle qui gère l'organisation globale et générale de la page Html. Nous n'y toucherons pas. La seconde est nommée les-styles.css. C'est elle qui attend nos réglages pour permettre à ces sections en accordéon de se déployer.
Plus bas dans le code Html, vous notez la présence d'un calque (balise Div) d'identifiant auCentre.
...
<div id="auCentre">
<!--
Implémentation
-->
<button onclick="maFonction('Section1')" class="bouton">Afficher ou Masquer la Section 1</button>
<div id="Section1" class="cacher">
<h3>Section 1</h3>
<p>Le calque est rendu visible.<br />
Il s'affiche dans le flux sur la ligne suivante en raison des dimensions occupant toute la largeur.
</p>
</div>
<button onclick="maFonction('Section2')" class="bouton">Afficher ou Masquer la Section 2</button>
<div id="Section2" class="cacher">
<h3>Section 2 avec image</h3>
<p><img src='img/photo4.jpg' style="border:#2b579a 1px solid;" /></p>
</div>
<button onclick="maFonction('Section3')" class="bouton">Afficher ou Masquer la Section 3</button>
<div id="Section3" class="cacher">
<h3>Section 3</h3>
<p>Le calque est rendu visible.<br />
Il s'affiche dans le flux sur la ligne suivante en raison des dimensions occupant toute la largeur.
</p>
</div>
</div>
...
C'est lui qui accueille la construction destinée à produire cet effet accordéon. Chaque titre est écrit dans un bouton. Chaque bouton est associé au style bouton (attribut class). C'est lui qui donne l'apparence aux titres des sections. En dessous de chaque bouton, vous notez la présence d'un calque. Ils sont respectivement identifiés avec les intitulés Section1, Section2 et Section3. Chacun offre un contenu. La deuxième section héberge même une image. Mais comme vous avez pu le noter, ces contenus ne sont pas visibles au chargement de la page Web. C'est le style cacher associé à chacun de ces calques qui régit ce comportement à ce stade. Et nous allons le constater.
- A la racine du dossier de décompression, ouvrir le sous dossier Css,
- Dès lors, cliquer droit sur la feuille de styles les-styles.css,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,
Puis, vient le style cacher. C'est lui qui gère les rubriques respectives placées sous les titres des sections.
.cacher
{
display:none;
text-align:left;
padding-left:20px;
}
L'attribut qui nous intéresse particulièrement est le premier. Il s'agit de l'attribut Css display. Réglé à none, il masque les calques, donc les contenus des sections.
Apparence des sections au survol
Désormais, avant de songer à déployer les sections au clic, nous souhaitons commencer par les faire réagir au survol de la souris. Nous proposons de modifier la couleur du texte. Et comme vous le savez, c'est un style dérivé à celui gérant les titres que nous devons construire. Il doit être muni du gestionnaire d'événement hover.
- Après le style bouton et avant le style cacher, créer le style suivant :
{
color:#d1ae42;
}
Comme nous l'annoncions, grâce à l'attribut color, nous choisissons d'influer uniquement sur la couleur du texte. Avec ce code hexadécimal, nous produisons un orange assez clair. Comme le style qui l'héberge est reconnu par le nom bouton, ce réglage concerne bien tous les titres. Mais comme il est suffixé du gestionnaire hover, il ne se déclenchera qu'aux survols respectifs de la souris.
- Enregistrer les modifications (CTRL + S) puis revenir sur la page Web,
- Actualiser le cache du navigateur avec le raccourci clavier CTRL + F5,
- Puis, passer la souris sur l'un et l'autre titre,
Très simplement donc, nous avons réussi notre premier effet. Les rubriques changent bien de couleur au survol, indiquant vraisemblablement qu'elles sont prêtes à réagir.
Déployer la vue des sections
Maintenant, il est question de déployer les sections aux clics sur les titres. Pour cela, nous proposons premièrement de créer un nouveau style Css.
- Revenir dans l'éditeur Notepad ++ sur la feuille de styles,
- A la suite du style cacher, créer le style montrer comme suit :
{
display:block;
}
Le style montrer n'est pour l'instant associé à aucun calque. Nous devons l'affecter dynamiquement aux sections par le code Javascript. Ainsi l'attribut display réglé sur block annihilera l'ancien réglé à none. La valeur block rend les calques visibles et les affichent dans le flux. Comme la largeur des calques est réglée à 100% de l'espace disponible, ces contenus apparaîtront nécessairement en dessous des titres et donc, repousseront les suivants.
- Enregistrer les modifications, puis revenir sur le code html de la page index.htm,
- En bas du code, dans la section de script, ajouter le code Javascript suivant :
</div>
<script type="text/javascript" language="javascript">
function maFonction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("montrer") == -1) {
x.className += " montrer";
} else {
x.className = x.className.replace(" montrer", "");
}
}
</script>
</body>
...
Nous créons la fonction nommée maFonction. Elle attend un identifiant en paramètre. Il s'agit de celui du calque cliqué. Vous l'aviez sans doute constaté, les gestionnaires d'appel avaient déjà été préparés dans chaque bouton
: ...
<button onclick="maFonction('Section1')"class="bouton">Afficher ou Masquer la Section 1</button>
<div id="Section1" class="cacher">
<h3>Section 1</h3>
<p>Le calque est rendu visible.<br />
Il s'affiche dans le flux sur la ligne suivante en raison des dimensions occupant toute la largeur.
</p>
</div>
<button onclick="maFonction('Section2')"class="bouton">Afficher ou Masquer la Section 2</button>
<div id="Section2" class="cacher">
...
De fait, chaque clic sur un titre appelle la fonction. Nous récupérons l'élément cliqué grâce à la méthode getElementById de l'objet document et nous le stockons dans une variable que nous nommons x. Grâce à cette variable objet et à sa propriété className, nous récupérons le nom du style qui lui est affecté. Et grâce à la méthode indexOf, nous cherchons à savoir si le style montrer lui a déjà été associé. Si cette méthode retourne la position -1, nous savons que ce style n'a pas été trouvé. En conséquence, nous l'ajoutons dans son attribut class séparé d'un espace (x.className += " montrer") pour l'associer à celui déjà présent pour que le nouvel attribut display remplace l'autre. Dans le cas contraire, grâce à la méthode replace, nous l'effaçons. De cette manière, un nouveau clic sur la section aura pour effet de replier la rubrique.
- Enregistrer les modifications (CTRL + S),
- Basculer sur la page Web,
- Actualiser le cache du navigateur par le raccourci clavier CTRL + F5,
- Puis cliquer et recliquer sur l'un et l'autre titre,
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales
