Problems with accordion based on slideToogle() and slideUp()

Problems with accordion based on slideToogle() and slideUp()

Hey everybody,

at first let me say hello to everybody cause i am new in this forum. I am still using jquery a while but wouldn't rate my jquery knowledge very good.

Actually i am trying to build an accordion based on slideToogle() and slideUp()... The only problem atm is that opened <ul class="children">...</ul> wrappers(yes they are the tooglin elements...) doesn't get closed, i think i missunderstud .siblings() and the hierarchy...?

I have the following structure:

Rendered HTML
  1. <div id="wrapper">
  2. <ul>
  3.       <li class="item">
  4.             <a href="">Link I</a>
  5.             <ul class="children">
  6.                   <li><a href="">I-1</a></li>
  7.                   ...
  8.                   <li><a href="">I-8</a></li>
  9.             </ul>
  10.       </li>
  11.       <li class="item">
  12.             <a href="">Link II</a>

  13.             <ul class="children">
  14.                   <li><a href="">II-1</a></li>
  15.                   ...
  16.                   <li><a href="">II-4</a></li>
  17.             </ul>
  18.       </li>
  19.       <li class="item"><a href="">Link III</a></li>
  20.       <li class="item"><a href="">Link IV</a></li>
  21. </ul>
  22. </div>
JS (.css() only added for debugging reasons)
  1. <script>
  2. $("#wrapper a").mouseover(function () {
  3.       $(this).next("ul.children").slideToggle("slow")
  4.       .siblings("ul.children:visible").css('background-color', 'red').slideUp("slow");
           });
     </script>



If anybody can give me a hint i would be really happy...

I also asked myself if there is the possibility to detect if the first level <li>'s have a <ul class="children">...</div> inside - you can see it in my example that the last 2 first level <li>'s doesn't have any included. I would make sense to handle that 2.

Thanks in advance and many regards,
Jan