Discussion :

[leraf]

Bonjour,

Voilà, je suis une quiche sur jQuery mais j'essaye de me soigner !!!
Je suis en train de mettre en place une liste qui doit afficher du contenu. ça fonctionne pas mal sauf que je n'arrive pas à lui dire de cacher la div précédement ouverte ... je ne vois pas comment boucler dans le js ...

Pour l'instant voici le code propre qui fonctionne sans mes essais désastreux pour cacher l'item précédement ouvert :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="discoTitreTracks">Titre</div>
<div class="discoParoleTracks"  style="display: none;">
   contenu
</div>
<div class="discoTitreTracks">Titre</div>
<div class="discoParoleTracks"  style="display: none;">
   contenu
</div>
etc ...

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
   var $j = jQuery.noConflict();
   $j(document).ready(function(){
      $j('.discoTitreTracks').click(function(){
         $j(this).next('.discoParoleTracks').slideToggle('fast');
      });
   });
</script>

Si quelqu'un pouvait m'expliquer, ce serait vraiment sympa

[SpaceFrog]

Et avec slideUp / Down ?

Code :

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

1
2
3
4
5
6
7
   var $j = jQuery.noConflict();
   $j(document).ready(function(){
      $j('.discoTitreTracks').click(function(){
         $j('.discoParoleTracks').slideUp('fast');
         $j(this).next('.discoParoleTracks').slideDown('fast');
      });
   });

ou un hide direct

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
   var $j = jQuery.noConflict();
   $j(document).ready(function(){
      $j('.discoTitreTracks').click(function(){
         $j('.discoParoleTracks').not($j(this).next('.discoParoleTracks')).hide();
         $j(this).next('.discoParoleTracks').slideDown('fast');
      });
   });
</script>

[leraf]

Ahhhhhh Super !!!!!!!!

MERCI !

en fait du coup, j'ai fais un mix entre tes deux propositions :

Code :

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

1
2
3
4
5
6
7
8
 
var $j = jQuery.noConflict();
   $j(document).ready(function(){
      $j('.discoTitreTracks').click(function(){
          $j('.discoParoleTracks').not($j(this).next('.discoParoleTracks')).slideUp('fast');
          $j(this).next('.discoParoleTracks').slideToggle('fast');
      });
   });

Ce qui me permettait de conserver l'effet Toggle (fermer si ouvert au clic) et de fermer l'élément précédement ouvert !!!

Merci encore SpaceFrog !

[SpaceFrog]

une autre ^possibilité serait de passer par le callBack du slideUp du menu qui se replie

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
   var $j = jQuery.noConflict();
   $j(document).ready(function(){
      $j('.discoTitreTracks').click(function(){
         temp=$j(this)
         $j('.discoParoleTracks').not($j(this).next('.discoParoleTracks')).slideUp(100, function(){temp.next('.discoParoleTracks').slideDown('fast')});
      });
   });
</script>

[leraf]

ah ouiiii !
OK ! J'ai l'impression d'être un enfant dans un magasin de jouets !!!!

En terme de performance, c'est similaire ou ton troisième exemple est plus propre que le mix des 2 premiers ???

Merci en tous cas !

[SpaceFrog]

La différence majeur est que le dernier exemple attend la fin de l'animation des repli du menu ouvert avant de lancer l'ouverture de l'autre.

On pourrait aussi je pense, pour gagner en perf, faire un filtre complémentaire sur le visible de façon à ne pas tenter de slider des éléments déjà fermés.