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 :
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>
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).

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
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
  } 
}
Mais comment effectuer cette instruction ?
Comment tester une propriété css ?

Merci beaucoup !