L'accordéon

<div class="accordion">
  <!-- Question 1 : le titre contient le bouton qui ouvre la réponse -->
  <h3>
    <button
      type="button"
      id="accordion-button-1"
      aria-expanded="true"
      aria-controls="accordion-panel-1"
    >
      Comment modifier mon mot de passe ?
    </button>
  </h3>
  <!-- Réponse 1 : reliée par aria-controls, fermée par le script.
       Pas de role="region" : Chrome garderait chaque réponse
       fermée (until-found) dans la liste des repères, vide. -->
  <div id="accordion-panel-1">
    <p>
      Dans Mon compte, ouvrez Sécurité, puis Modifier
      le mot de passe. Un mail confirme le changement.
    </p>
  </div>
  <!-- Questions 2 à 4 : même structure -->
</div>

<script>
  // Sans JavaScript, toutes les réponses restent lisibles :
  // le script les ferme au chargement, puis gère chaque bouton
  const buttons = document.querySelectorAll(
    '.accordion button[aria-controls]'
  );

  const panelOf = (button) =>
    document.getElementById(button.getAttribute('aria-controls'));

  // until-found : Ctrl+F trouve le texte d'une réponse fermée
  const toggle = (button, open) => {
    button.setAttribute('aria-expanded', String(open));
    if (open) {
      panelOf(button).removeAttribute('hidden');
    } else {
      panelOf(button).setAttribute('hidden', 'until-found');
    }
  };

  for (const button of buttons) {
    toggle(button, false);
    button.addEventListener('click', () => {
      const open = button.getAttribute('aria-expanded') !== 'true';
      toggle(button, open);
    });
    // La recherche du navigateur ouvre la réponse qui contient le texte
    panelOf(button).addEventListener('beforematch', () => {
      toggle(button, true);
    });
  }
</script>

/* Le bouton prend toute la largeur du titre */
.accordion h3 button {
  display: flex;
  width: 100%;
  align-items: center;
  text-align: left;
}

/* Un « + » qui devient « − ». Le texte alternatif vide garde
   le signe hors du nom de la question. La 1re déclaration sert
   de repli aux navigateurs qui ignorent ce texte alternatif. */
.accordion h3 button::after {
  content: "−";
  content: "−" / "";
  margin-left: auto;
}

.accordion h3 button[aria-expanded="false"]::after {
  content: "+";
  content: "+" / "";
}