Jquery : Faire un .slidetoggle avec un 'this'

Hello,
Je suis en train de réaliser mon CV en ligne pour d'apprendre d'avantage certains langages web. C'est une sorte d'exercice pour moi, donc ne faites pas trop attention au contenu qui n'est pas encore bien approfondit.

Le voici : http://www.karben-urbex.com/david.seve/david.seve.html

Je suis entrain d'apprendre le Jquery et là je bloque.

Je souhaite faire des blocs qui s'ouvrent et se ferment au clic ("Formations", "compétences", "réalisations", etc... sauf "carrière" qui restera ouvert). J'ai réussi en partie à le faire, sauf que, lorsqu'on clique sur un des blocs ils s'ouvrent/se ferment tous ! Je voudrais que chacun s'ouvre séparément des autres.
J'ai pensé à mettre un 'this' mais je n'arrive pas à le faire fonctionner.
Je pourrais aussi dupliquer le bout de code Jquery pour chaque bloc en lui donnant à chaque fois un nouvel id mais j'aimerais que le code soit optimisé au mieux.

Voici le code Jquery :

$(document).ready(function() {
 $('.pull').click(function() {
   $('.panel').slideToggle('slow');
 });
});

Bout de code Html :

<div class="pull"><p class="slide"><h2>Formations</h2></p></div>
			<div class="panel">
			<ul>
	            <li>IUT Techniques de commercialisation : IUT Claude Bernard Lyon 1</li>
	            <li>BAC professionnel commerce mention bien : Alexis CAREL</li>
	            <li>BEP Vente Action Marchande en 1 an : Alexis CAREL</li>
	            <li>BEP Travaux paysagers : LEGTA Dardilly</li>
	        </ul>
			
			</div>
			<div class="pull"><p class="slide"><h2>Réalisations</h2></p></div>
			<div class="panel">
			<ul>
			<li></li>
			<li></li>
			</ul>
			</div>

Merci de m'avoir lu

Coucou !

Alors du coup c'est le comportement normal car $('.panel') va prendre tout les éléments qui ont la classe "panel". Premier possibilité, comme tu l'évoques, il te faudrait une classe spécifique (voir un id unique) pour chaque "panel" mais pas besoin de dupliquer le Js pour autant si tu le fait un poil générique, il suffirait de récupérer l'infos de quel bloc est à affiché dans l'élément cliqué. en gros ton élément cliquable à un id="bloc1" quand tu clique dessus tu récupere "bloc1" et tu fait apparaître l'élément qui a l'id "bloc1-panel". Donc de façon générique tu fait apparaître le panel avec l'id égal à l'id de l'élément cliqué + panel. Mais c'est peut être un peu coûteux comme méthode.

Le $this fera référence ici à l'élément cliqué donc peu utile tant que ne n'est pas lui ou un de ses enfants qui fait l'objet de changements.
Mais du coup tu pourrais en profiter pour inclure le pannel dans le .pull et utiliser le this.find (https://api.jquery.com/find/)
Ca sera peut etre un peu plus clair par l'exemple (au passage on va supprimer quelques bloc inutiles comme l’enchaînement de h2 dans un p dans une div ) :

<div class="pull">
    <h2>Formations</h2>
    <div class="panel">
        Blablabla
        <ul>
            <li>IUT Techniques de commercialisation : IUT Claude Bernard Lyon 1</li>
            <li>BAC professionnel commerce mention bien : Alexis CAREL</li>
            <li>BEP Vente Action Marchande en 1 an : Alexis CAREL</li>
            <li>BEP Travaux paysagers : LEGTA Dardilly</li>
        </ul>
    </div>
</div>

$(document).ready(function() {
    $('.pull').click(function() { //ici on change rien
        $(this).find('.panel').slideToggle('slow'); //ici on va dire sélectionne le pannel DANS l'élément cliqué et affiche le
    });
});

http://fiddle.jshell.net/uuxehxoq/

bonne journée

Hello,

En utilisant $(this) tu te trouveras sur la div cliquée, il te reste plus qu'à parcourir le DOM pour atteindre l'objet que tu souhaite animer.
Modifié par Oken (03 Sep 2015 - 09:22)

Hello !
Merci Laurent, ça marche !!
Je vais lire un peu plus sur le this.find car j'ai pas tout compris...

Peux-tu m'aider (encore) à faire descendre la page au niveau d'un bloc lorsqu'il s'ouvre en même temps ?
J'ai pensé à faire quelque chose avec les ancres mais ça reste très flou dans mon esprit...

Salut salut,

Alors la ligne :

$('html, body').animate({scrollTop:$(this).offset().top}, 1000);

Si on la décompose,
$('html, body') sélectionne les éléments <html> et <body>,
.animate({ }, 1000); va animer ce qu'on lui donne entre les accolades https://api.jquery.com/animate/
scrollTop() donne un niveau de scroll donné à un élément https://api.jquery.com/scrollTop/
$(this).offset().top récupère la position du top de l'élément "this"

Maintenant on reviens un peu sur le $this. Il représente l'élément ciblé dans le contexte. Autrement dit quand tu est dans une fonction comme $('.pull').click(function() { } entre les accolades le $this va représenter l'élément cliqué. En dehors des accolade il n'a aucun sens.
C'est comme quand tu utilise le "il" en français. Si je te dis "il va bien" tu vas me demander "qui ?"... mais si je suis dans un contexte "J'ai rencontré Mario, il va bien" BOUM dans le contexte le "il" se réfère à "Mario".
Et tu peux utiliser le "il" plusieurs fois, si tu reste dans le meme contexte et meme en changeant de contexte. Ca reste "il" mais il ne cible pas la meme chose : "J'ai rencontré Mario, il va bien. J'ai aussi vu son frère, il est tout petit."


Est-ce que tu vois ce qui pèche dans ton code du coup ?
Modifié par _laurent (04 Sep 2015 - 11:35)

Ca marche et je comprends mieux pourquoi ça ne marchait pas avant ! Super tes explications.
J'ai encore quelques réglages à faire pour ajuster la hauteur du scroll et les décalages intempestifs lors de l'ouverture/fermeture.

Voilà le code que j'ai du coup :

$(document).ready(function() {    
 $('.pull').click(function() {
   $(this).find('.panel').slideToggle('slow');
   $('html, body').animate({scrollTop:$(this).offset().top}, 1000)
 });
});

Encore une fois merci !!
Modifié par dwarf69 (04 Sep 2015 - 11:47)

dwarf69 a écrit :
Ca marche et je comprends mieux pourquoi ça ne marchait pas avant !

Perfect ! Bon weekend !