Action au clic

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');
});

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.

Bonjour,
j'ai repris ce code pour un autre projet (il avait trop bien fonctionné la première fois ^^). Cette fois-ci j'ai menu avec des cat et des sous-cat.
J'aurais besoin que la cat soit dans une autre couleur que ses voisines lorsque sa sous cat est ouverte.
Aurais-je oublié qq chose ? Car cela ne fonctionne pas

	$(".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('current-cat'); // l'ajout est ici
	$(this).toggleClass('current-cat');
});

Modifié par Vanouille (22 Dec 2020 - 08:01)