SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Show/Hide
-
Oct 9, 2006, 13:02 #1
- Join Date
- Aug 2004
- Location
- Port Sunlight
- Posts
- 815
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Show/Hide
Hi,
I have a page that I am wanting to show/hide sections.
http://www.lyonparkjuniors.org.uk/index.asp
As you can see there are two buttons, Latest News and Hot Dates, I have used a script from DOM Scripting book, and it works to an extent, my main issue though is I want the Latest News section to be displayed on page load.
I am struggling, here is my js code.
Code:// toggle visibility function showSection(id) { var divs = document.getElementsByTagName("div"); for (var i=0; i<divs.length; i++ ) { if (divs[i].className.indexOf("section") == -1) continue; if (divs[i].getAttribute("id") != id) { divs[i].style.display = "none"; } else { divs[i].style.display = "block"; } } } function prepareSwitch() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("switch")) return false; var nav = document.getElementById("switch"); var links = nav.getElementsByTagName("a"); for (var i=0; i<links.length; i++) { var sectionId = links[i].getAttribute("href").split("#")[1]; if (!document.getElementById(sectionId)) continue; document.getElementById(sectionId).style.display = "none"; links[i].destination = sectionId; links[i].onclick = function() { showSection(this.destination); return false; } } } addLoadEvent(prepareSwitch);
-
Oct 9, 2006, 16:35 #2
- Join Date
- Sep 2002
- Location
- Grand Rapids, MI
- Posts
- 1,168
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
At first glance, it looks as though adding this to the body tag would work:
<body onload="showSection('newsArea');">
However it may be simpler to set newsArea to display:block as default.From the English nation to a US location.
-
Oct 9, 2006, 17:01 #3
- Join Date
- Aug 2004
- Location
- Port Sunlight
- Posts
- 815
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes, well i'm trying to have an unobtrusive approach and keep all my javascript external and not inline.
I also tried to set the newsArea to display:block in the css, but it didn't want to work.
-
Oct 10, 2006, 01:33 #4
- Join Date
- Aug 2004
- Location
- Port Sunlight
- Posts
- 815
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, by adding the onload code to the body tag it does show the section as default, but it is inline scripting which I want to avoid and secondly when I click the Hot Dates button it does nothing.
Any ideas?
-
Oct 10, 2006, 03:29 #5
- Join Date
- Aug 2004
- Location
- Port Sunlight
- Posts
- 815
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Anyone?
-
Oct 10, 2006, 05:04 #6
- Join Date
- May 2003
- Location
- Cambridge, UK
- Posts
- 2,366
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you want to remove the onload from the code, just move it to the javascript file:
Code:addLoadEvent(function () { showSection('newsArea'); });
Bookmarks