10989 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
j'ai un petit code JS qui fonctionne à 95% mais je n'arrive pas à finaliser la manoeuvre. Je voudrais que lorsque l'on clique de ligne en ligne pour voir le content text la flèche qui accompagne le texte sur la droite et qui se tourne vers le bas au clic revienne en position départ quand on clic sur une autre ligne et que le content se referme... Mais j'y arrive po :'-(

<div class="narrowchart">
    <div id="accordion">         
   
        <div class="accordianheader">
            <h3>OneDrive</h3>
        </div>
        <div class="accordianbody">
            <div>
                <p>2. vghfghfgyh</p>
            </div>
        </div>
         
        <div class="accordianheader">
            <h3>Écran PixelSense™</h3>
        </div>
        <div class="accordianbody">
            <div>
                <p>3. vghfghfgyh</p>
            </div>
        </div>         
    </div>
</div>


<style type="text/css">
    body .fg-box {position: static;}
    .narrowchart {
        margin:38px 32px 0px 22px;
    }
    .accordianheader {
        padding:13px 20px;
        margin-top:12px;
        margin-left: 50%;
        font-family:"SourceSansPro-Regular",sans-serif!important;
    }
    .accordianheader h3 {
        font-family: "SourceSansPro-Regular",sans-serif!important;
        font-size:1.2rem;
        float:left;
        margin-right:8px;
    }
    .accordianheader:before {
        display:inline-block;
        font-size:12px;
        content:"?";
        font-family:MM-iconfont;
        transition: -webkit-transform .25s ease;transition: transform .25s ease; transition: transform .25s ease,-webkit-transform .25s ease;
        -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);
        color: #4acbd4;
    }
    .arrowbottom:before {
        -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);
        color: #ffca00;
    }
    .accordianbody {display:none; margin-left:50%;}
    .accordianbody ul {padding:25px;}
    .accordianbody ul li {font-family:"SourceSansPro-Regular",sans-serif!important; font-size:1.2rem; line-height:1.5rem; margin-top:13px;}
    .accordianbody ul li:nth-child(1) {text-align:center;} 

</style>


<script language="JavaScript">   
     
$(".accordianheader").click(function() {
    var nextBody = $(this).next()[0];
    var valueOfDisplayForNextbody = window.getComputedStyle(nextBody).getPropertyValue("display");
    $(".accordianbody").hide();
    if(valueOfDisplayForNextbody == "none") {
        $(nextBody).show();
    }
    else {
        $(nextBody).hide();
    }
    $(this).toggleClass('arrowbottom');
});
 
</script>
Bonjour,

Essayez ceci :
$(".accordianheader").click(function() {
    var nextBody = $(this).next()[0];
    var valueOfDisplayForNextbody = window.getComputedStyle(nextBody).getPropertyValue("display");
    $(".accordianbody").hide();
    if(valueOfDisplayForNextbody == "none") {
        $(nextBody).show();
    }
    else {
        $(nextBody).hide();
    }
    $(this).siblings().removeClass('arrowbottom'); // l'ajout est ici
    $(this).toggleClass('arrowbottom');
});
Merci beaucoup Olivier C, j'avais posté cette question sur plusieurs forum et vous êtes le seul à avoir répondu. Un plus grand merci encore pour ce code car il fonctionne parfaitement ^^
Il faut dire que les gens sont moins portés sur jQuery désormais, moi-même j'ai abandonné ce framework récemment.

Mais siblings() est le type de fonctionnalités qui, avec les sélecteurs, a fait le succès de cette librairie, quand il faut reproduire ça en vanilla js au début on patauge...

jQuery a beaucoup contribué à faire de javascript ce qu'il est aujourd'hui.