Show/Hide Vertical Nav-Menu Help (jQ)

JavaScript
1

I’m sure this should be simple but it’s driving me nuts!

I have a nav menu with lists within lists (3 deep), with pattern as follows:


<ul>
  <li class="show-hide">
    <a class="parent"></a>
    <ul>
      <li class="show-hide">
        <a class="parent"></a>
        <ul>
         <li><a></a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

I’ve written the following jQuery, which works nicely:


$("li.show-hide ul").hide(); 
$("a.parent").click(function () {
  $(this).next("ul").slideToggle("slow")
  return false;
});

When a parent link is clicked it reveals the sub-list. What I would like to do is hide currently visible lists when another is revealed. I’ve tried to use .siblings but it dunt werk (or, at least, I can’t make it happen!)

Help!

2

The way to do that is to hide all of the lists, then to show the clicked one, and each of its parents.

3

I have hidden all of the lists first. The script then shows the one proceeding the clicked link, which is fine. What I want to do is hide any others that are already open – at the moment you can expand the entire tree, which I don’t want…

4

The way to hide any that are already open is to hide all of them, and then to open up only the ones that you need to be opened.

5

That’s exactly what you said before. Except I get it this time. Excuse my slowness!

I’ve got this now:


$("li.show-hide ul").hide(); 
$("a.parent").click(function () {
  $("li.show-hide ul").slideUp("slow")
  $(this).next("ul").slideToggle("slow")
  $(this).parents("ul").slideDown("slow")
  return false;
});

… which works nicely.

Thanks!