Bonjour a tous !
Depuis peu je me suis mis à implémenter un peu d'Ajax dans mon site pour le rendre plus attractif mais je rencontre une petite difficulté pour bien gérer les effets.
Pour faire simple, j'ai une série d'article avec uniquement le titre qui s'affiche et quand je clique sur ce titre, le contenu apparait en glissant vers le bas grace à "toggle".
Jusque là tout va bien. Voici le script que j'utilise :
Ce script se trouve dans la boucle qui affiche mes articles. La variable $donnees['id'] contient ainsi à chaque fois l'id de l'article en cours d'affichage. (pas sûr que ce soit la bonne méthode de mélanger comme cela javascript et php mais ça marche).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 <script> <?php echo '$("#js_fx_titre' . $donnees['id'] . '").click(function(){'; echo '$("#js_fx_contenu' . $donnees['id'] . '").slideToggle("slow")'; echo '});'; ?> </script>
Mais j'aimerai maintenant que un seul article puisse être affiché à la fois c-a-d que lorsque l'utilisateur clique sur le titre d'un article, celui-ci s'ouvre en glissant vers le bas, mais qu'alors l'article qui était ouvert se ferme en glissant vers le haut ! je m'exprime bien ?
Pour y arriver je comptais faire une condition du type
Mais comment effectuer cette instruction ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 for(toutes les div concernées){ if(la propriété css "display" != "none"){ exécuter le toggle } }
Comment tester une propriété css ?
Merci beaucoup !
Partager