Ouvrir div au clic

- - Dernière réponse :  terrybogar - 5 juil. 2019 à 23:50
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.
Afficher la suite 

3 réponses

Messages postés
26550
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 octobre 2019
1839
0
Merci
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
.
Commenter la réponse de jordane45
0
Merci
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>
jordane45
Messages postés
26550
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 octobre 2019
1839 -
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
Commenter la réponse de terrybogar
0
Merci
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.
Commenter la réponse de terrybogar