SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member rickydazla's Avatar
    Join Date
    Jan 2011
    Location
    Detroit, MI
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide Vertical Nav-Menu Help (jQ)

    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:
    Code HTML4Strict:
    <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:

    Code JavaScript:
    $("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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    The way to do that is to hide all of the lists, then to show the clicked one, and each of its parents.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member rickydazla's Avatar
    Join Date
    Jan 2011
    Location
    Detroit, MI
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The way to do that is to hide all of the lists, then to show the clicked one, and each of its parents.
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rickydazla View Post
    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...
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member rickydazla's Avatar
    Join Date
    Jan 2011
    Location
    Detroit, MI
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    That's exactly what you said before. Except I get it this time. Excuse my slowness!

    I've got this now:
    Code JavaScript:
    $("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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •