SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Show/Hide Links In Vert Nav Bar
-
Jun 8, 2007, 10:35 #1
- Join Date
- Mar 2005
- Location
- Tennessee
- Posts
- 797
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Show/Hide Links In Vert Nav Bar
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.htmlTodd Temple > T2 Design
-
Jun 8, 2007, 17:12 #2
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:
Code html:<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.Saul
-
Jun 9, 2007, 05:54 #3
- Join Date
- Mar 2005
- Location
- Tennessee
- Posts
- 797
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 TempleTodd Temple > T2 Design
-
Jun 9, 2007, 06:37 #4
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:
Code javascript: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'; }
Code html:<div name='region'> <!-- ... --> </div> <script type="text/javascript">hideall()</script>
Saul
-
Jun 9, 2007, 06:48 #5
- Join Date
- Mar 2005
- Location
- Tennessee
- Posts
- 797
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
ToddTodd Temple > T2 Design
-
Jun 9, 2007, 06:59 #6
No, everything is OK, just that you've copied the function from here and did not change the div name ('loc' to 'region').
Code javascript:var divs=document.getElementsByName('region');
Saul
-
Jun 9, 2007, 08:25 #7
- Join Date
- Mar 2005
- Location
- Tennessee
- Posts
- 797
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 DesignTodd Temple > T2 Design
-
Jun 9, 2007, 08:59 #8
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.Saul
Bookmarks