Show/Hide

**NickToye** · Oct 9, 2006, 13:02

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);

If anyone can help me, you will get loads of good will thoughts from me.

**awestmoreland** · Oct 9, 2006, 16:35

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.

**NickToye** · Oct 9, 2006, 17:01

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.

**NickToye** · Oct 10, 2006, 01:33

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?

**NickToye** · Oct 10, 2006, 03:29

Anyone?

**Buddy Bradley** · Oct 10, 2006, 05:04

If you want to remove the onload from the code, just move it to the javascript file:

Code:

addLoadEvent(function () {
  showSection('newsArea');
});

The SitePoint Forums have moved.

User Tag List

Thread: Show/Hide

Thread Tools

Display

Show/Hide

Bookmarks

Bookmarks

Posting Permissions