Show/Hide Links In Vert Nav Bar

[Todd Temple]

I am trying to locate a script that will help with my nav bar. The nav bar is vertical and has a few live text links in it. The links are of "regions" and each region contains several "locations". I want the nav to initially show just the three regions and once a user clicks on a specific region, I would like for the locations for that region to appear underneath the respective region... but only the region that was clicked on. I have seen this on many sites, but I couldn't find one quick enough to post in my thread. However, I do have a sample page to look at that displays my starting point and where I want to go. I do not want the page to have to reload in order to display the sub links and Dreamweavers Show/Hide Layers and Pop-Up Menu are not doing the trick. The Pop-Up Menu feature was close, but it didn't shift the main links when a list of sub links popped up. I appreciate everyones help in advance!


LINK-
http://ackermannpr.com/fsf/sitepoint.html

[php_daemon]

There are (at least) two ways to do it: load the regions in hidden content or use ajax to retrieve the regions asynchronously from the server.

In first case, you can use a hidden div, then show/hide it when the link is clicked:

<a href="javascript:void(0)" onclick="showhide(0)">Location 1</a><br />
<div name="loc">
  <a href="region1_1.html">Region 1</a><br />
  <a href="region1_2.html">Region 2</a><br />
</div>
<a href="javascript:void(0)" onclick="showhide(1)">Location 2</a><br />
<div name="loc">
  <a href="region2_1.html">Region 1</a><br />
  <a href="region2_2.html">Region 2</a><br />
</div>
 
<script type="text/javascript">
  //hide the layers initially
  var divs=document.getElementsByName('loc');
  var i=0;
  for(i=0; i<divs.length; i++) divs[i].style.display='none';
 
  function showhide(id){
    var divs=document.getElementsByName('loc');
    if(divs[id].style.display=='none') divs[id].style.display='block';
    else divs[id].style.display='none';
  }
</script>

In case of ajax... well, I'm too lazy and it's late, look up Ajax.

[Todd Temple]

Thanks php-daemon!

Just one question. I added your code and script, but I can't figure out how to make the default or the initial view to hide the div's. The are visible when I go to the page and I would like to make them hidden. Any clues? Here is a link to where I am so far.


LINK-
http://www.ackermannpr.com/fsf/locationsHours.html


Thanks again! Your a genius!

Todd Temple

[php_daemon]

You've included the code to your other JS code in the head part of the document. That's all OK, but the hide all snippet is executed before the rest of the document (including the divs) is loaded. It is important that the hide all code is executed after the divs are loaded (so there is actually something to hide). You can wrap up that code into a function and make a call below the divs:

  function hideall(){
    //hide the layers initially
    var divs=document.getElementsByName('loc');
    var i=0;
    for(i=0; i<divs.length; i++) divs[i].style.display='none'; 
  }

<div name='region'>
<!-- ... -->
</div>
 
<script type="text/javascript">hideall()</script>

[Todd Temple]

I have added the new function to the global.js file and also added the call after the div tags within the body.

Was I supposed to add the comment tags?

Does the function and/or call need to be in the same document or can the function reside in the global javascript file?

Here is where I am at....


LINK-
http://www.ackermannpr.com/fsf/locationsHours.html


Thanks so much!

Todd

[php_daemon]

No, everything is OK, just that you've copied the function from here and did not change the div name ('loc' to 'region').

var divs=document.getElementsByName('region');

[Todd Temple]

Woops! My bad. I changed that part and it still was not working. I tried removing the comments from each category and it is working fine now. I really, really, really, really appreciate your help. You are a life saver!


LINK-
http://www.ackermannpr.com/fsf/locationsHours.html


Thanks again!

Todd Temple > T2 Design

[php_daemon]

Sure.

Not sure what comments are you talking about, though. If those in my post #4, that was my attempt to use ... without breaking the html.