Show / Hide div onClick()

Version imprimable

Bonjour à tous,

Voilà, je pense que le problème est assez simple à résoudre, j'ai un bouton avec la classe "work" sur lequel on clique pour afficher le div avec l'id "work" et le texte du lien ainsi que sa classe change en même temps.
Pour que lorsqu'on reclique sur le bouton, on affiche le div précédent.

Pour le moment j'ai ceci, mais ça ne fonctionne pas, seule le premier clic fonctionne... Et je ne pense pas que ce soit le plus propre non plus...
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready(function(){ $('.works').on('click', function(){ $('#works').show().siblings('div').hide(); $('.works').html('<span>See my skills</span><i class="icon-briefcase"></i>').removeClass().addClass('skills'); }); $('.skills').on('click', function(){ $('#works').hide().siblings('div').show(); $('.skills').html('<span>See my works</span><i class="icon-briefcase"></i>').removeClass().addClass('works'); }); });
Code:

1 2 3 4 <div class="shortBtn "> <a class="works" rel="nofollow"><span>See my works</span><i class="icon-briefcase"></i></a> <a href="/documents/cv.pdf" target="_blank" class="download" rel="nofollow"><span>Download my CV</span><i class="icon-down-circled "></i></a> </div>
Pouvez-vous m'aider ?

Merci beaucoup

12/03/2014, 13h45
SpaceFrog

Code:

$('#works').

il est ou lui ?

donnes nous au moins le html complet que l'on puisse comprendre le contexte général

il manque déja de preventDefault() ou stopPropagation() pour éviter le déclenchement du href

Code:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
	$('.works').on('click', function(){
		$('.aboutWorks').show().siblings('div').hide();
		$('.works').html('<span>See my skills</span><i class="icon-briefcase"></i>').removeClass().addClass('skills');
	});
	$('.skills').on('click', function(){
		$('aboutWorks').hide().siblings('div').show();
		$('.skills').html('<span>See my works</span><i class="icon-briefcase"></i>').removeClass().addClass('works');
	});
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!--Dark grey-->
<div class="darkGrey">
    <!--Container-->
    <div class="container clearfix">
        <!--About content-->
        <div class="aboutContent row">
            <div class="aboutInfo">
                <ul>
                    <li><span>Birthdate</span> : xxxxxx</li>
                    <li><span>Phone</span> : xxxxxx</li>
                    <li><span>Email</span> : xxxxxx</li>
                </ul>
            </div>
            <div class="aboutSocial">
                <ul>
                    <li><a href="xxxx" target="_blank"><i class="icon-twitter"></i></a></li>
                    <li><a href="xxxx" target="_blank"><i class="icon-facebook"></i></a></li>
                    <li><a href="xxxx" target="_blank"><i class="icon-gplus"></i></a></li>
                    <li><a href="xxxx" target="_blank"><i class="icon-linkedin"></i></a></li>
                </ul>
            </div>
            <div class="aboutSkills">
                <h1>My skills</h1>
                <ul class="skillsList clearfix">
                    <li><h4>HTML5</h4>
                        <div class="rating">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span class="transparent"></span>	
                        </div>
                    </li>
                    <li><h4>CSS3 / LESS</h4>
                        <div class="rating">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span class="transparent"></span>	
                        </div>
                    </li>
                    <li><h4>php</h4>
                        <div class="rating">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span class="transparent"></span>
                            <span class="transparent"></span>	
                        </div>
                    </li>
                    <li><h4>MySql</h4>
                        <div class="rating">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span class="transparent"></span>
                            <span class="transparent"></span>
                            <span class="transparent"></span>
                            <span class="transparent"></span>	
                        </div>
                    </li>
                    <li><h4>wordpress</h4>
                        <div class="rating">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span class="transparent"></span>	
                        </div>
                    </li>
		</ul>
            </div>
            <div class="aboutWorks">
                <h1>Works</h1>
            </div>
        </div>
        <!--End about content-->

En fait il y a 4 div dans le aboutContent. Soit les 3 premiers sont affichés, soit le dernier qui est "aboutWorks".

Que sont les preventdefault() dont tu parles ? Quand les utiliser ?

Avec les preventDefault()

Code:

1
2
3
4
5
6
7
8
9
10
$('.works').on('click', function(e){
	e.preventDefault();
	$('.aboutWorks').show().siblings('div').hide();
	$('.works').html('<span>See my skills</span><i class="icon-briefcase"></i>').removeClass().addClass('skills');
});
$('.skills').on('click', function(e){
	e.preventDefault();
	$('aboutWorks').hide().siblings('div').show();
	$('.skills').html('<span>See my works</span><i class="icon-briefcase"></i>').removeClass().addClass('works');
});

Pour ce genre de cas que pour un clique afficher puis un autre clique cacher, puis un autre clique afficher... ou pour un clique enlever classer puis un autre clique rajouter puis un autre clique enlever : il faut penser aux méthodes .toggle() et .toggleClass(), on peut même animer ces changement facilement.
.toggle() pour afficher/cacher les éléments, on peut utiliser aussi slideToggle()pour des effet de slide même si on peut aussi faire avec toggle. Alors que ce fait le toggle si par exemple j'ai deux div je veux que l'un s'affiche l'autre se cache en même temps (ou un seul s'affiche après 2e clique il se cache) c'est simple je peux faire comme ça:
Code:

1 2 3 <div class="cl1" >Je suis affiché au début</div> <div class="cl1" style="dispaly:none">Je suis caché au début</div> <button id="btn_toogler" value="Clique moi" />
Code:

1 2 3 4 5 $(function(){ $( "#btn_toogler" ).click( function(){ $(".cl1" ).toggle( "slow" ); }); });
Ce code là si tu clique sur le bouton le premier div va se cacher et puis le 2e va s'afficher et si tu reclicke, ça va retourner comme au début tout avec un effet d'apparition animé si tu ne veux pas alors ne met ce paramètre, tu peux ajouter un callback si tu veux

.toggleClass() quand à lui permet de faire ce jeu mais pour des class.
Par exemple si j'ai trois div dont un seul possède une classe cl2 qui fait par exemple que le couleur de l'arrière plan est rouge et je veux qu'au clique, les deux autres soient comme lui et lui il perd cette couleur,
Code:

1 2 3 .rouge{ background: red; }
Code:

1 2 3 4 <div class="cl2">Je suis blanc au début</div> <div class="rouge cl2" >Je suis rouge au début</div> <div class="cl2">Je suis blanc au début</div> <button id="btn_toogler" value="Clique moi" />
Code:

1 2 3 4 5 $(function(){ $( "#btn_toogler" ).click( function(){ $(".cl2" ).toggleClass( "rouge" ); });});
Au premier clique il va enlever la classe "rouge" sur le 2e div, en même temps il va l'ajouter aux deux autres. ils ont tous en commun la classe "cl2", comme je pourrais utiliser "div" comme selecteur et ne pas mettre cl2 dans le div. Au 2e clique sur le bouton tout va retourner comme au debut, et ainsi de suite.

Ou peux utiliser les deux méthodes à la fois. Tu peux cacher par exemple le 3e et imbriquer les deux méthodes, et faire aussi que celui au milieu ne se cache jamais en lui donnant une classe afin de le filtrer
Code:

1 2 3 4 <div class="cl2">Je suis blanc au début</div> <div class="rouge cl2 cl3" >Je suis rouge au début</div> <div class="cl2 " style="display:none">Je suis blanc mais caché au début </div> <button id="btn_toogler" value="Clique moi" />
Code:

1 2 3 4 5 6 $(function(){ $( "#btn_toogler" ).click( function(){ //On a ajouté la classe cl3 pour le div au milieux pour qu'il reste toujours apparent $(".cl2" ).toggleClass( "rouge" ).not(".cl3").toggle( "slow" ); });});
Alors essayes d'adapter ton code pour les bonnes méthodes et reviens ici pour tout souci, et surtout n'utilise pas le même nom de class ".works" pour le bouton aussi comme j'ai vu dans ton code, car tout ce que tu vas faire sur le div possédant la classe ".works", va se faire aussi sur le bouton, et enlève même la classe ".works" au bouton alors comment tu va pouvoir le sélectionner après alors que tu as dis d’enlever la classe ".works" sur tous les éléments qui la possède :aie:, donc au prochain clique le bouton ne possède pas la classe donc pas sélectionné et enfin tu as ça: :bug:

EDIT: Je suis désolé il y avait des erreurs sur le code avec les noms des classe car j'ai écris tout ça à la mains sans avoir à tester