Discussion :

[ovni]

Bonjour!

Je débute en javascript et jQuery.
J'aimerai réaliser un simple show hide sur un div.

J'arrive facilement à le faire en javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="javascript">
function showHide(divId)
    {
    if (document.getElementById(divId).style.display=="inline")
        {
        document.getElementById(divId).style.display="none";
        }
    else
        {
        document.getElementById(divId).style.display="inline";
        }
    }
</script>

et j'appelle la fonction avec onClick=showHide('mondiv')

Pour un meilleur effet je voudrais utiliser jQuery, j'arrive à le faire pour un div spécifique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
	$(document).ready(function(){
 
	$("div.show").each(function(){
    	     $(this).hide();
        });
 
 
	$('#view').click(
	function(){
		$('#mondivId').fadeToggle("slow","linear");
	});
 
 
});
</script>

Mais j'aimerai comme la fonction javascript créer un fonction qui récupère l'id du div à afficher.
Quelquechose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
	$(document).ready(function(){
 
	$("div.show").each(function(){
    	     $(this).hide();
        });
 
 
 
	function showHide(divId){
		$('#'+divId).fadeToggle("slow","linear");
	}
 
 
});
</script>

Et j'appelerai ensuite la fonction avec un onclick=showHide('mondiv') mais ça ne fonctionne pas...

J'en profite pour une autre question :
Si au lieu de fadeToggle j'utilise slideDown. Comment savoir "l'état" de mon div? Afin de savoir s'il est déjà dérouler et dans ce cas on utilise slideUp et vice versa

Merci!

[danielhagnoul]

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function showHide(divID){
    // http://api.jquery.com/toggle/
    $("#"+divId).toggle();
}

[Macmillenium]

Et j'appelerai ensuite la fonction avec un onclick=showHide('mondiv') mais ça ne fonctionne pas...

showHide est une fonction privée puisqu'elle est déclarée à l'intérieur d'une fonction anonoyme.
Tu dois la sortir du $(document).ready() si tu veux qu'elle soit visible au niveau global.

j'utilise slideDown. Comment savoir "l'état" de mon div? Afin de savoir s'il est déjà dérouler et dans ce cas on utilise slideUp et vice versa

Cf. code donné par Daniel, sauf qu'il faut utiliser la méthode slideToggle() dans ton cas.