CSS Textes en accordéon
Des solutions de textes en "accordéon" uniquement en CSS
Les propositions ci-dessous sont issues de ce site : (auteur : Mary Lou)
info licence : https://tympanus.net/codrops/licensing/
Tout est téléchargeable sur le site. Je me suis juste contenté de jouer avec et d'adapter les propositions pour un article, une boite libre de GuppY ou un autre CMS, bien sûr. Elles sont "responsive design".
Bien sûr une solution existe déjà dans GuppY, mais qui utilise JQuery. Toutes sont compatibles entre elles et permettent d'avoir d'autres choix éventuels. Ces présentes solutions sont très simples à mettre en oeuvre, et il sera possible, en les appliquant telles que décrites ci-dessous, d'avoir des réglages de style différents dans des articles différents (ce qui n'est pas possible -simplement- avec la solution native de GuppY).
Deux solutions sont décrites ci-dessous. La première présente ses boites fermées, et elles peuvent toutes être ouvertes. La seconde présente une boite ouverte et l'ouverture d'une autre boite ferme la première. La hauteur s'adapte au contenu. [Les textes sont obtenus aléatoirement sur ce site.]
=== >> EXEMPLE 1 << ===
Songeons que l'homme a jeté un sort. Appâté par des rumeurs qui courent en la ville de son royaume ? Remets ton couteau dans son étui, dit la dame. Depuis six mois qu'il fait parler, et accepte enfin, avant qu'il ait les yeux bandés comme un mendiant ou un prisonnier.
Fatigué de la comtesse il y avait si peu de place dans la demi-lune par le fait de vos parents. Ajoutons que, elle s'introduisit seule par la brèche. Descendre, c'est propre de venir faire avec lui une conversation longue et sérieuse.
Respirant à fond pour maintenir la propriété de tous, les yeux secs. Poursuivant sa quête du trésor, on disait de lui que cette visite était obligée.
Cruellement... Pas le moindre bruit. Dites-leur que les intérêts en jeu sont colossaux. Puissance magique qu'on éteint, il invitait toutes ces demoiselles, très pâles. Replacés dans l'évolution de la vie, il l'accueillait avec tendresse. Cela lui irait très bien aujourd'hui qu'il l'a trouvé dans les fresques de la chapelle ardente, dont les opinions me semblent devoir être préférées à celles des autres. Aurais-je la chance de pouvoir utiliser la chaloupe.
Imprudemment, oui, répondit la mère qui en fut éblouie. Restez assis, monsieur : c'est à peine sensible. Comme tremblant aux haleines de la foule furieuse, c'est exactement ce qui s'attache à sa commune. Tu étais le seul qui m'aies deviné : tu as eu un boulot. Donnez-les-moi, je vais tabler sur la bonne voie : il faut dire que je vous rencontre sur le palier. La double ligne de maisons ne continua plus.
Que dire de la compagnie ? Que ses expériences ont fait faire un jardin d'un pas trébuchant ; appuyé sur son bureau, il n'était pas plus agité pendant la délibération de son arrêt, toutefois limité.
=== >> EXEMPLE 2 << ===
Songeons que l'homme a jeté un sort. Appâté par des rumeurs qui courent en la ville de son royaume ? Remets ton couteau dans son étui, dit la dame. Depuis six mois qu'il fait parler, et accepte enfin, avant qu'il ait les yeux bandés comme un mendiant ou un prisonnier.
Fatigué de la comtesse il y avait si peu de place dans la demi-lune par le fait de vos parents. Ajoutons que, elle s'introduisit seule par la brèche. Descendre, c'est propre de venir faire avec lui une conversation longue et sérieuse.
Respirant à fond pour maintenir la propriété de tous, les yeux secs. Poursuivant sa quête du trésor, on disait de lui que cette visite était obligée.
Cruellement... Pas le moindre bruit. Dites-leur que les intérêts en jeu sont colossaux. Puissance magique qu'on éteint, il invitait toutes ces demoiselles, très pâles. Replacés dans l'évolution de la vie, il l'accueillait avec tendresse. Cela lui irait très bien aujourd'hui qu'il l'a trouvé dans les fresques de la chapelle ardente, dont les opinions me semblent devoir être préférées à celles des autres. Aurais-je la chance de pouvoir utiliser la chaloupe.
Imprudemment, oui, répondit la mère qui en fut éblouie. Restez assis, monsieur : c'est à peine sensible. Comme tremblant aux haleines de la foule furieuse, c'est exactement ce qui s'attache à sa commune. Tu étais le seul qui m'aies deviné : tu as eu un boulot. Donnez-les-moi, je vais tabler sur la bonne voie : il faut dire que je vous rencontre sur le palier. La double ligne de maisons ne continua plus.
Que dire de la compagnie ? Que ses expériences ont fait faire un jardin d'un pas trébuchant ; appuyé sur son bureau, il n'était pas plus agité pendant la délibération de son arrêt, toutefois limité.
Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style est obligatoire (c'est le même pour les deux exemples), au début du code source de l'article ou de la boite libre, ou dans styleplus.css.
Adapter à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les textes, insérez le code correspondant à chaque exemple en adaptant les contenus, bien sûr. Les parties surlignées en blanc seront à adapter à vos souhaits et votre configuration, notamment au niveau du chemin des flèches (gene_1 ou autres... natives dans GuppY).
L'exemple 1 est de type="checkbox" (toutes les boites peuvent donc s'ouvrir ensemble). L'exemple 2 est de type="radio" (une boite s'ouvre et celle qui était ouverte se ferme).
Pour ouvrir une boite par défaut, il faut placer dans l'exemple 1 comme dans l'exemple 2 : checked="checked" à l'intérieur de la balise <input de votre choix. Dans l'exemple 1 il est possible d'ouvrir plusieurs boites par défaut, mais pas dans l'exemple 2.
Respectez bien les id="ac-1" , id="ac-2" ... en les différentiant : un par "article accordéon" des textes.
Amusez-vous bien...
Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.
Catégorie : - Autres astuces en CSS
Page lue 81652 fois