More Cousin than Sibling... unfortunately

More Cousin than Sibling... unfortunately

Hi,
If anyone could help me with this, what I think is quite simple, jQuery problem, I would be muchio grateful!

I am building a relatively simple info box slide thing.

The user is supposed to click on the <span> inside the <li> (spans are necessary for the design unfortunately) and the <div> inside the <li> should open up - closing any other currently open <div> of the same type.

I can make the <div>s open. The problem is I don't know how to make a <div> that is already open, close, when it's 'Cousin' has just been opened.

Here's the HTML.

<div class="ContactListBox">
   <ul>
      <li><span>CLICKABLE TITLE</span>
         <div class="SelectionView">
            [Details...]
         </div>
      </li>
      <li><span>CLICKABLE TITLE</span>
         <div class="SelectionView">
            [Details...]
         </div>
      </li>
      ...
   </ul>
</div>


Here's my current miserable jQuery.

$(".ContactListBox li li span").click(function(){
   $(this).next("div.SelectionView").slideToggle("fast")
   .siblings("div.SelectionView:visible").slideUp("fast");
});


Many thanks,
Will9000