11110 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.
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 Smiley decu


	$(".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)
Olivier C a écrit :

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

Oh !! le pionnier que je suis peut te dire deux choses...
petit rappel.
Cartes perforées 1725
Le langage C a été inventé au cours de l'année 1972
JavaScript a été créé en 1995
janvier 2006 Jquery 14 petites années pour faire des usines à gaz pour écrire TOTO à l'écran !

J'ai vécu tout cela, je peux te dire que si tu regardes mes AJAX, ils font quelques lignes et gèrent de façon simple ce bijoux si pratique !!
NON JQuery n'a rien apporté à Javascript.
Tiens réalises ce bijoux avec un JQuery Smiley confused
Et tant d'autres réalisations !
https://codepen.io/jplyne/pen/poyMKeB