Nouvelles
Téléchargements
Liens
FAQ
Livre d'or
Forum
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 << ===
=== >> EXEMPLE 2 << ===
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.
Date de création : 08/01/2019 @ 08:06
Dernière modification : 08/01/2019 @ 08:06
Catégorie : Autres astuces en CSS
Page lue 59441 fois