Comment déplier tous les paragraphes d’un coup 😉
De nombreux site utilisent l’outil « accordéons » pour déplier ou replier des paragraphes. Malheureusement, les programmeurs font souvent en sorte que lorsqu’on déplie un élément, cela replie le précédent… quelle galère quand on a besoin de regarder deux contenus en même temps!
Les designer oublient généralement de prévoir de tout déplier lorsqu’on imprime la page en pdf.
Et bien aujourd’hui, je vous montre comment faire une boucle en javascript pour tout déplier d’un seul coup.
Exemple Bootstrap
Les thèmes basés sur Bootstrap ont des paragraphe (« div ») avec la classe « collapse » qui signifie « repliage ». Pour les afficher, il faut supprimer la classe « collapsed » (replié) et ajouter la classe « show » (visible).
document.querySelectorAll(".collapse").forEach(
function (element,index) {
element.classList.remove("collapsed");
element.classList.add("show")
})
Ce qui en une ligne s’écrit:
document.querySelectorAll(".collapse").forEach(function (e,i){e.classList.remove("collapsed"); e.classList.add("show")})
C’est cette ligne est une boucle « forEach » qui signifie « pour chaque », et vous pouvez la coller dans la partie « console » de votre page web.
Vous pouvez l’essayer sur la page de Bootstrap pour voir les trois paragraphes s’ouvrir:
https://getbootstrap.com/docs/5.0/components/accordion/
Autre exemple
L’université du Michigan propose également un menu avec des paragraphes repliés.
https://wmich.edu/evaluation/checklists#managing-evaluation
Ici, les paragraphes à chercher sont ceux qui contiennent la classe « content » et il n’y a pas besoin d’enlever une classe: il suffit d’ajouter la classe « active ».
document.querySelectorAll("div.content").forEach(function (e){e.classList.add("active")});