[JQuery] probleme de slideToggle

Version imprimable

05/07/2008, 16h52
timboy11

[JQuery] probleme de slideToggle

j'ai utilisé le slideToggle pour afficher/cacher des images ça marche tres bien,
mais pour le le champ texte,je veux qu'il soit cacher par defaut comme c le cas pour les images,qu'il se montre pas que si je clique sur affichier.
merci à vous
voila mon code:
/*******************************/
<script type="text/javascript" src="jquery-1.2.6.js"> </script>

<script type="text/javascript">
$(document).ready(function(){
//fonction du clic sur le bouton entrez
$(".entrer").click(function(){
$("#bouge").slideToggle("slow");//"slow","normal","fast" ou durée en milisecondes
});
//fonction du clic sur les boutons voir
$(".voir").click(function(){
$(this).parent().next("<img>").slideToggle("slow");
});
});
</script>
/************************************/
<body>
<div id="bouge">
zone admin : <br /><br />

<br /><br />
<a href="#" class="entrer">Entrer</a>

</div>

<div id='sous'>
<div class='brique'>
<h1>effacer membre<a href="#" class="voir">afficher</a></h1>
<form name=form method=post action="sup membre.php">
entrez le login du membre à effacer<input type="text" name="login" >
</form>
</div>

<div class='brique'>
<h1>image 2 <a href="#" class="voir">afficher</a></h1>
<form name=form method=post action="sup membre.php">
entrez le login du membre à effacer<input type="text" name="login" >
</form>
</div>

<div class='brique'>
<h1>image 3 <a href="#" class="voir">Voir/Cacher</a></h1>
<img src='./sexy_jq00.jpg' alt='coquinou' title='coquinou'>
</div>
</div>
</body>
06/07/2008, 09h32
Bovino

C'est pas très clair...
Déjà, pense à utiliser la balise code (bouton '#'), c'estmieux pour ceux qui lisent ton code ;)
Ensuite, si j'ai bien compris, ce qui te gène, c'est le formulaire...
Si c'est ça, l'erreur vient de là :

Code:

$(this).parent().next("<img>").slideToggle("slow");

essaye plutôt avec :

Code:

$(this).parent().next().slideToggle("slow");
06/07/2008, 09h52
timboy11

1 pièce(s) jointe(s)

merci pour ton aide,
ça marche pas,regrade stp l'aperçu,quand j'ouvre la page je clique sur entrer,et il m'affiche la page dans l'aperçu,mait je veux que le champ texte soit caché aussi dés l'ouverture comme les 2 images en bas.
et pour la balise ,e sais pas comment faire,je suis nouveau,j'ai cherche mais r1

Si ça ne marche pas avec :

Code:

$(this).parent().next().slideToggle("slow");

c'est que le slide ne doit pas fonctionner avec un form, essaye donc de mettre ton formulaire dans une div :
Code:

1 2 3 4 <h1>effacer membre<a href="#" class="voir">afficher</a></h1> <div><form name=form method=post action="sup membre.php"> entrez le login du membre à effacer<input type="text" name="login" > </form></div>

06/07/2008, 12h55
timboy11

ça marche pas avec div :(,mais le slid marche aussi avec les formulaires
puisque je peux le cacher en cliquant sur le lien.
06/07/2008, 13h04
Bovino

Ceci dit, la solution est peut-être de le cacher par défaut :

Code:

document.forms['form'].hide()

C'est probablement ce que tu dois faire quelque part avec tes images...

rien à faire,
regarde ou je l'ai placé.je te remercie pour ton aide

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="jquery-1.2.6.js"> </script>

<script type="text/javascript">
$(document).ready(function(){
  //fonction du clic sur le bouton entrez
	$(".entrer").click(function(){
		$("#bouge").slideToggle("slow");//"slow","normal","fast" ou durée en milisecondes
	});
	//fonction du clic sur les boutons voir
	$(".voir").click(function(){
		$(this).parent().next("<img>").slideToggle("slow");
document.forms['form'].hide();


	});
});
</script>

Non, il est mal placé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
document.forms['form'].hide();
 
  //fonction du clic sur le bouton entrez
	$(".entrer").click(function(){
		$("#bouge").slideToggle("slow");//"slow","normal","fast" ou durée en milisecondes
	});
	//fonction du clic sur les boutons voir
	$(".voir").click(function(){
		$(this).parent().next("<img>").slideToggle("slow");
 
	});
});

06/07/2008, 16h41
timboy11

pas de chance ça marche pas,ça empeche la 1er animation de fonctionner
alors je peux pas voir la couleur mes liens,et je l'ai utilisé ds plusieurs endroits mais r1.
06/07/2008, 17h45
Bovino

Peut-être

Code:

$('form').hide();

Essaye en rajoutant dans ton css
Code:

1 2 3 4 5 .brique form { display: none; }
et dans ton code jQuery
Code:

1 2 $(this).parent().next("<form>").slideToggle("slow");

06/07/2008, 18h53
Bovino

:nono:

Code:

$(this).parent().next("<form>").slideToggle("slow");

1)

Code:

next("form")

2) Le next peut être une balise form ou img, il ne faut donc pas la préciser... d'où :

Code:

$(this).parent().next().slideToggle("slow");
06/07/2008, 18h58
timboy11

alors la chapeau :king: ,ça marche,merci pour ton aide et bonne soirée
06/07/2008, 19h01
timboy11
c juste ce petit code qui manquait,l'autre marche aussi avec "<img>"
Code:

1 2 3 4 5 .brique form { display: none; }
merci encore:D