Afficher/cacher une div

Version imprimable

Bonjour,

J'utilise le code JS suivant pour afficher et cacher une div :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script type="text/javascript"> function toggle_div(li, id) { var div = document.getElementById(id); if(div.style.display=="none") { div.style.display = "block"; li.innerHTML = "Autres filtres (fermer)"; } else { div.style.display = "none"; li.innerHTML = "Autres filtres"; } } </script> <ul> <li><a onclick="toggle_div(this,'autres_filtres');"href="#">Autres filtres</a></li> </ul> <div id="autres_filtres">contenu</div>
Ce code fonctionne mais l'affichage/masquage est "brusque". Je souhaiterais trouver le code équivalent en jquery, qui je crois est capable de gérer les effets de "transition" dans l'affichage/masquage. Pouvez-vous m'aider ? Merci.

22/09/2011, 13h19
SpaceFrog

hide() show() fadeIn() fadeOut() .....
22/09/2011, 13h25
almoha

Merci pour la réponse. Mais comme je suis vraiment débutant, pouvez-vous m'aider à transposer mon code actuel JS en code Jquery qui comporterait

Citation:

hide() show() fadeIn() fadeOut() ...

Merci d'avance.
22/09/2011, 13h36
SpaceFrog

http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/fadeIn/
http://api.jquery.com/fadeOut/

Merci pour les liens. Je suis parti sur le hide() et le show() :

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
 
<script>
jQuery(document).ready(function() {
 
				jQuery("#autres_filtres").hide();
				jQuery(".cacher").hide();
				jQuery(".montrer").click(function() {
 
									jQuery("#autres_filtres").slideToggle(1000);
									jQuery(".cacher").show;
									jQuery(".montrer").hide;
 
 
											 });
				jQuery(".cacher").click(function() {
 
									jQuery("#autres_filtres").slideToggle(1000);
									jQuery(".cacher").hide;
									jQuery(".montrer").show;
 
											});
 
 
						   });
</script>
 
		<li class="montrer"><a id="affichage">Autres filtres</a></li>
		<li class="cacher"><a id="affichage">Autres filtres fermer</a></li>
 
<div id="autres_filtres">contenu</div>

L'affichage et masquage de la div fonctionne. Mais l'affichage du lien ne change pas lorsque je déplie la DIV : quand je clique sur le lien "Autres filtres", cela ne déclenche pas l'affichage du lien "Autres filtres fermer". Une idée sur la cause du dysfonctionnement ? Merci.

22/09/2011, 15h08
SpaceFrog

regarde du coté du selecteur :not() pour "les autres"
22/09/2011, 15h12
almoha

Merci. J'avais oublié les () après les hide et show. Cela fonctionne maintenant.
22/09/2011, 15h12
SpaceFrog

sinon
hide()
show()
22/09/2011, 15h38
almoha
Je viens de me rendre compte d'un comportement bizarre : lorsque ma page se charge (ou se recharge), l'espace d'une fraction de seconde le
Code:

1 2 <li class="cacher"><a id="affichage">Autres filtres fermer</a></li>
s'affiche à côté du
Code:

1 2 <li class="montrer"><a id="affichage">Autres filtres</a></li>
Pourtant dans le code, l'élément ayant la classe "cacher" est censée être cachée par le hide(). Comment expliquer cet affichage "exprès" puis disparition ? A noter que si la page n'est pas rechargée, ce dysfonctionnement n'existe pas.Merci.
22/09/2011, 16h08
SpaceFrog

le hide s'applique au chargement
si tu ne veux pas le voir met le style display non ou visibility hidden dans le css
22/09/2011, 16h16
almoha

Merci de nouveau. Effectivement, il fallait passer par le CSS pour arriver au résultat escompté.