Ouvrir div au clic [Fermé]

Signaler
-
 terrybogar -
Bonjour,
J'arrive à faire un menu (une sorte d'Accordeon). J'ai mis une class "accordion" sur des div.
En cliquant sur ces div, je fais apparaitre la div suivante grace à nextElementSibling :
https://codepen.io/furyfatal/pen/RzxXWY

Mais ce n'est pas vraiment ça que je veux faire. Ce que je veux c'est que la div suivante apparait quand je clique uniquement sur Oui. Et qu'elle ferme quand je clique sur Non. Là je ne sais pas comment faire.

En mettant la class "accordion" sur Oui (qui est un petit enfant), je dois peut-être faire "this.parentNode.parentNode.nextElementSibling", mais ça ne marche pas.

3 réponses

Messages postés
30153
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 novembre 2020
2 971
Bonjour,

Déjà, tes addEventListener doivent être sur tes radios
Ensuite, tu pourras utiliser le parentNode.

PS: A l'avenir, merci de poster ton code directement sur le forum.

NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage afin d'avoir la coloration syntaxique)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Je viens de mettre une class="radio" sur les 4 inputs de type radio.
Ensuite, j'ai fait "parentNode.parentNode.nextElementSibling", mais ça ne marche pas :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accordion</title>
<style>
body {
font:15px sans-serif;
}
.box-choice {
max-width:940px;
background-color: #F6FCFF;
margin:0 auto 10px;
padding:12px 50px 12px 20px;
}
.box-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.formula-name,
.formula-question {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #313961;
}
.formula-yes-no {
margin-left: -30px;
}
.price-pers {
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.more-detail {
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.25em;
color: #FF9900;
text-align: center;
margin-right: 10px;
}
.more-detail:hover {
color: #09527E;
}
.flex-2 {flex:2}
.flex-5 {flex:5}

.hidden {display:none} /* Caché par défaut */
</style>
</head>
<body>

<form>
<div class="box-choice accordion">
<div class="box-flex">
<div class="formula-question">Souhaitez-vous une assurance ?</div>
<div class="formula-yes-no">
<label for="assurance-yes"><input name="assurance" value="1" type="radio" id="assurance-yes" class="radio"><span class="yes-no">Oui</span></label>
<label for="assurance-no"><input name="assurance" value="0" type="radio" id="assurance-no" class="radio"><span class="yes-no">Non</span></label>
</div>
</div>
</div>

<div class="hidden"> <!-- Caché par défaut -->
<div class="box-choice">
<div class="box-flex">
<div class="formula-name flex-5"><label for="assurance-cancel"><input name="assurance-type" value="assurance-cancel" type="radio" id="assurance-cancel"><span class="f-name">Assurance annulation</span></label></div>
<div class="price-pers flex-5">+ 30 € / Pers.</div>
<div class="more-detail flex-2"><a href="#">+ de détails</a></div>
</div>
</div>

<div class="box-choice">
<div class="box-flex">
<div class="formula-name flex-5"><label for="assurance-comprehensive"><input name="assurance-type" value="assurance-comprehensive" type="radio" id="assurance-comprehensive"><span class="f-name">Assurance multirisques</span></label></div>
<div class="price-pers flex-5">+ 50 € / Pers.</div>
<div class="more-detail flex-2"><a href="#">+ de détails</a></div>
</div>
</div>
</div>


<hr>


<div class="box-choice accordion">
<div class="box-flex">
<div class="formula-question">Souhaitez-vous une option-xxx ?</div>
<div class="formula-yes-no">
<label for="option-yes"><input name="option" value="1" type="radio" id="option-yes" class="radio"><span class="yes-no">Oui</span></label>
<label for="option-no"><input name="option" value="0" type="radio" id="option-no" class="radio"><span class="yes-no">Non</span></label>
</div>
</div>
</div>

<div class="hidden"> <!-- Caché par défaut -->
<div class="box-choice">
<div class="box-flex">
<div class="formula-name flex-5"><label for="option1"><input name="option-type" value="option1" type="radio" id="option1"><span class="f-name">Option 1</span></label></div>
<div class="price-pers flex-5">+ 10 € / Pers.</div>
<div class="more-detail flex-2"><a href="#">+ de détails</a></div>
</div>
</div>

<div class="box-choice">
<div class="box-flex">
<div class="formula-name flex-5"><label for="option2"><input name="option-type" value="option2" type="radio" id="option2"><span class="f-name">Option 2</span></label></div>
<div class="price-pers flex-5">+ 20 € / Pers.</div>
<div class="more-detail flex-2"><a href="#">+ de détails</a></div>
</div>
</div>
</div>
</form>



<script>
var acc = document.getElementsByClassName(".radio");

console.log(acc);

for (let i=0; i<acc.length; i++) {

acc[i].addEventListener("click", function() {

var panel = this.parentNode.parentNode.nextElementSibling;

if ( (panel.classList.contains("hidden")) && this.value == 1 ) {
panel.classList.remove("hidden");
}
else {
panel.classList.add("hidden");
}

});

}
</script>
</body>
</html>
Messages postés
30153
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 novembre 2020
2 971
Qu'est-ce que tu n'as pas compris dans le lien que je t'ai donné ???
Ensuite...regarde bien ça :
https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName
J'ai vu, je sais le faire s'il n'y a qu'un seul div à viser. Mais dans mon cas, il y a plusieurs et je ne souhaite pas répéter.