Bonjour à tous...

Comme le dis le sujet, je souhaite mettre en place un accordéon, mais je n'y arrive pas. Je suis parti sur l'exemple Accordeon (ici) de JQuery... mais je n'arrive pas a le réadapter... je me perd dans les pointeurs etc...

Je vous présente ma structure html pour un seul bloc !!
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="barre impaire">
  <div class="top"> </div>
  <div class="middle">
    <ul>
      <li class="picto"><img src="truc.png" /></li>
      <li class="date">18/03/2010</li>
      <li class="qui">Dudule</li>
      <li class="quoi">Mission à la con...</li>
      <li class="action"> </li>
    </ul>
    <br clear="all" />
  </div>
  <div class="encart" style="display:none">
    <div class="encart_top"> </div>
    <div class="encart_middle">
        <p> Lorem ipsum dolor sit amet</p>
    </div>
    <div class="encart_bottom"> </div>
  </div>
  <div class="bottom"> </div>
</div>
Mon javascript est plus simple... pour l'instant je clique sur la div.barre et ça fait apparaitre le div.encart...
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function(){
  $('.encart').hide();
  $(".barre").click(function(){
    $(this).children(".encart").slideToggle("slow");
  });
});
</script>
ça, ça marche !!!

Mais je souhaiterais pourvoir cliquer sur l'object li.quoi et faire apparaitre la div.encart mais fermer tout les autres...

et la je rame...
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function(){
  $('.encart').hide();
  $(".barre li.quoi").click(function(){
    $(this).next("div.encart").slideToggle("slow")
    .siblings("div.encart").slideUp("slow");
  });
});
</script>

Si vous avez une idée ou pouvez m'orienter...
d'avance merci
Benji