Bonjour à tous,
Je suis en train de développer un petit code jQuery pour faire apparaitre la liste des catégories de la carte googlemap en cliquant sur un bouton. Puis une fois avoir sélectionné ma catégorie refermer la liste en cliquant sur un autre bouton.
Voici le code
<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 (normal). 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.
A+
Je suis en train de développer un petit code jQuery pour faire apparaitre la liste des catégories de la carte googlemap en cliquant sur un bouton. Puis une fois avoir sélectionné ma catégorie refermer la liste en cliquant sur un autre bouton.
Voici le code
<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 (normal). 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.
A+
Commentaire