Discussion :

[DrWilly]

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 !

[michel.bosseaux]

Syntaxe javascript :

tondiv.style.display

[danielhagnoul]

Bonsoir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(this).css("color","red");

[Kerod]

le code donné par danielhagnoul sert à attribuer une valeur à une propriété CSS. Pour récupérer la valeur il te suffit d'utiliser le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).css("color");

[DrWilly]

Effectivement ça marche ! Merci beaucoup !

Le problème, c'est que mon analyse était trop simpliste et je n'arrive donc toujours pas à appliquer le toggle sur l'article déjà ouvert.

En gros, c'est cette instruction de mon pseudo code que je n'arrive pas à implémenter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
for(toutes les div concernées){
  // condition et code
}

Je rappel que le nom de mes div sont "#js_fx_titre + Id_de_l_article" et "#js_fx_contenu + Id_de_l_article" où Id_de_l_article est évidement l'id de l'article contenu dans les div.

Il faudrait que quand je clique sur un titre, le contenu s'affiche avec toggle, mais le contenu de l'article qui était déjà ouvert, lui, se ferme (également avec toggle)

Comment pouvoir retrouver l'article déjà ouvert ?

Merci !

[Kerod]

C'est simple

• soit on se dit
  
  • On garde en mémoire l'identifiant de l'article ouvert (je dis bien id article et non celui du div) ;
  • On modifie la propriété css
  • on fait un slideDown sur l'article à afficher
• soit se dit
  
  • l'article ouvert on lui attribue un nom de classe bidon mais qui servira comme jeton, du style open ou on
  • A l'affichage d'un autre article, on fait un display: none sur tous les éléments de classe open
  • On affiche le nouvel article sélection et on lui attribue la classe open

A creuser