Spoiler JQuery, répetabilité de l'animation [Résolu]

[kirra13]

Bonjour à tous,

Je vous explique ce que je souhaite réaliser. Je suis en train de développer un petit code jQuery pour faire apparaitre la liste des catégories (après un click sur un bouton d'ouverture)d'un formulaire sur un site internet. Une fois que j'ai sélectionné ma catégorie, je souhaite pouvoir refermer la liste en cliquant sur un autre bouton.

Voici le code

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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 
var $j = jQuery.noConflict(); //j'évite les conflits avec les autres librairies
 
$j(document).ready(function(){
 $j('#gCatForm').hide(); //je cache la liste des catégories
 
$j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur" value=""/></div>').insertBefore('#gCatForm'); // j'insère la div avant la liste des catégories
 
 $j('.revelateur').click(function(){
 $j(this).parent().next().fadeIn(); //lorsque je click sur le bouton d'ouverture j'affiche l'élément suivant
 
$j(this).parent().remove(); //je supprime mon bouton d'ouverture
 
$j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/suivant.png)no-repeat;border:0px;" class="revelateur" value=""/></div>').insertBefore('#gCatForm'); //je remplace le bouton d'ouverture par mon bouton de fermeture
 
 $j('.revelateur').click(function(){
 $j(this).parent().next().hide(); //un fois que je click sur le bouton de fermeture la liste des catégories disparait
 
$j(this).parent().remove(); //je supprime le bouton de fermeture
 
$j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur" value=""/></div>').insertBefore('#gCatForm'); //j'affiche de nouveau le bouton d'ouverture
 });
 });
 });
 </script>

Le script fonctionne bien mais mon soucis c que sans recharger la page je peux faire le cycle qu'une seule fois. J'aimerais savoir comment je peux boucler mon script pour que les visiteurs puissent ouvrir ou fermer autant de fois qu'ils le souhaitent la liste des catégories. Cela doit se jouer avec une boucle mais je bloque.

Merci par avance pour votre aide.

[kirra13]

Voici le code qui fonctionne

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('#gCatForm').hide();
$j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur" value="Cliquez ici pour afficher"/></div>').insertBefore('#gCatForm');
$j('.revelateur').live('click', function(){
$j(this).parent().next().fadeIn();
$j(this).parent().hide();
$j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur1" value="Cliquez ici pour effacer"/></div>').insertBefore('#gCatForm');
	$j('.revelateur1').click(function(){
		$j(this).parent().next().fadeOut();
		$j(this).parent().remove();
		$j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur" value="Cliquez pour afficher les catégories"/></div>').insertBefore('#gCatForm');
		});
	});
});
</script>

A+