JavaScript : rendre le Web interactif (école d'ingénieur) · Chapitre 8 · Exercice de TD
Voir plus, voir moins
Événements et formulaires · niveau 1 (application)
Énoncé
Une carte de livre contient un bouton « Voir plus » et une zone de détails cachée (hidden). Écrire le script qui montre ou cache la zone, change le texte du bouton et tient à jour son attribut aria-expanded.
Corrigé
const bouton = document.querySelector("[aria-controls='details']");
const details = document.querySelector("#details");
bouton.addEventListener("click", () => {
const ouvert = bouton.getAttribute("aria-expanded") === "true";
bouton.setAttribute("aria-expanded", String(!ouvert));
details.hidden = ouvert;
bouton.textContent = ouvert ? "Voir plus" : "Voir moins";
console.log(bouton.textContent, "| hidden :", details.hidden);
});Deux clics :
Voir moins | hidden : false
Voir plus | hidden : true100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.