Ouvrir div au clic

terrybogar -  
 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.
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
.
0
Réponse 2 / 3
terrybogar
 
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>
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
0
Réponse 3 / 3
terrybogar
 
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.
0