Hello hello, pas besoin de javascript pour ça
Tu peux tout faire en css, mais faut juste tricher sur ton bouton
Dans ton html, tu remplace ton bouton par ceci
<input type="checkbox" name="step2" id="step2" />
<label for="step2" class="button-label">passer à l'étape 2...</label>
<div class="wp-block-group etap2">
<div class="wp-block-group__inner-container">
<h2 id="h.p_ID_86">Étape 2/2</h2>
</div>
</div>
Et dans ton css
/* Ici tu cache la checkbox uniquement, tout en laissant le label visible,
qui lui est lié à la checkbox grace au for="step2" */
#step2 {
display: none;
}
/* Tu design ton label pour qu'il ressemble à un bouton */
.button-label {
border: 1px solid black;
padding: 10px;
background: grey;
color: white;
cursor: pointer;
}
/* Tu cache ta div */
.etap2 {
display: none;
}
/* Sur le pseudo element checked de ta checkbox tu viens ciblé l'element suivant grace au tild ~
et tu le rend visible quand checked */
#step2:checked ~ .etap2 {
display: block;
}
Si malgré tout tu veux continuer en javascript, voici la correction de ton JS
function showetape2() {
var elem = document.querySelector(".etap2");
elem.style.display = "block";
}
Ton erreur vient de getElementsByClassName, qui te renvoie un tableau de class (HTMLCollection) , donc tu ne pouvais pas appliquer directement du style dessus.
Si tu voulais que ça fonctionne il aurait fallut ajouté l'index de l'element ciblé
function showetape2() {
var elem = document.getElementsByClassName("etap2");
// Ici on ajoute l'index 0
elem[0].style.display = "block";
}
Petit conseil pour la prochaine fois, quand tu fais tu JS, debug ton code avec des console.log() comme ceci
function showetape2() {
console.log('Je rentre dans ma fonction')
var elem = document.getElementsByClassName("etap2");
console.log('elem =>', elem)
// Ici on ajoute l'index 0
elem[0].style.display = "block";
}
Bon courage pour la suite