Comment puis-je faire en sorte qu'un élément réinitialise la valeur de sa propriété lorsqu'on clique sur lui-même et lorsque l'on clique sur d'autres boutons ?

Question

J'ai du JavaScript simple qui écoute les clics, et lorsque vous cliquez dessus, quatre choses se produisent :

1. Classe "Formulaire Ouvert" ajoutée au bouton
2. L'attribut "aria-expanded" est défini sur "true"
3. Afficher les divs précédemment masqués.
4. Le texte "après" du bouton devient "Fermer les informations" (Ceci est contrôlé via CSS selon que le bouton contient ou non la nouvelle classe "form-opened".)

Lorsqu'un autre bouton est cliqué, l'inverse se produit avec le premier bouton cliqué, la classe ajoutée est supprimée, l'attribut "aria-expanded" est réinitialisé à "false" et le div est à nouveau masqué (à nouveau défini sur CSS) et le " Après », le texte devient « Lire la suite ».

Cependant, si vous cliquez une deuxième fois sur le même bouton, alors que la classe ajoutée est supprimée comme prévu et que le div est à nouveau masqué, l'attribut "aria-expanded" n'est pas réinitialisé à "false". Quelqu'un peut-il m'expliquer pourquoi et me dire ce que je dois faire ? (Pas de jQuery, merci).

const tips = Array.from(document.querySelectorAll('.toggle-button'));
tips.forEach((tip) => {
    tip.addEventListener('click', () => {
        tips
        .filter((f) => f !== tip)
        .forEach((f) => {
        f.setAttribute('aria-expanded', false);
        f.classList.remove('form-opened');
        });
        tip.setAttribute('aria-expanded', true);
        tip.classList.contains('form-opened');
        tip.classList.toggle('form-opened');
    });
});

.toggle-button ~ .tips {
  display: none;
}
button.toggle-button[aria-expanded="false"]:after {
  content: "Read more";
}
.toggle-button.form-opened ~ .tips {
  display: block;
  margin-bottom: 16px;
}
button.toggle-button[aria-expanded="true"]:after {
  content: "Close info";
  cursor: pointer;
}
.visually-hidden {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

<div class="toggle-box">
<label for="button-1" class="visually-hidden toggle-list">Open or Close info</label><button id="button-1" class="toggle-button" aria-expanded="false"></button>
<div class="tips">
  Here is some text that is to be revealed </div>
</div>
<div class="toggle-box">
<label for="button-2" class="visually-hidden toggle-list">Open or Close info</label><button id="button-2" class="toggle-button" aria-expanded="false"></button>
<div class="tips">
  Here is some text that is to be revealed </div>
</div>
<div class="toggle-box">
<label for="button-3" class="visually-hidden toggle-list">Open or Close info</label><button id="button-3" class="toggle-button" aria-expanded="false"></button>
<div class="tips">
  Here is some text that is to be revealed </div>
</div>

J'ai vu des requêtes similaires, mais pas exactement les mêmes ou très anciennes, ou elles utilisent jQuery.

Answer 1

Cliquer sur un bouton définira uniquement la propriété aria-expanded de tous les autres boutons sur false. Vous devez également basculer l'état actuel du bouton :

const tips = Array.from(document.querySelectorAll('.toggle-button'));
tips.forEach((tip) => {
    tip.addEventListener('click', () => {
        tips
            .filter((f) => f !== tip)
            .forEach((f) => {
                f.setAttribute('aria-expanded', false);
                f.classList.remove('form-opened');
            });
        
        // Toggle both aria-expanded attribute and form-opened class
        tip.setAttribute(
            "aria-expanded",
            tip.getAttribute("aria-expanded") == 'true' ? 'false' : 'true'
        );
        tip.classList.toggle('form-opened');
    });
});