Afficher/cacher une div [Résolu]

[almoha]

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.

[SpaceFrog]

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

[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

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

Merci d'avance.

[SpaceFrog]

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

[almoha]

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.

[SpaceFrog]

regarde du coté du selecteur :not() pour "les autres"

[almoha]

Merci. J'avais oublié les () après les hide et show. Cela fonctionne maintenant.

[SpaceFrog]

sinon
hide()
show()

[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.

[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

[almoha]

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