Hide Show Content

Click on the section headers below to open hidden content on the web page. As each section is opened, the other sections will close, leaving only the selected section open.

Click This Section Header #1

A - This is text written inside a paragraph tag. There's enough content here to demonstrate page information - like a table or something else like that.

Here's another paragraph tag inside the section.

Rob	Age 37	Height 5'11"
Heather	Age 37	Height 5'8"
Alexis	Age 4	Height 3'4"
Rachel	Age 4	Height 3'1"

Here's the last paragraph

Now Click This Section Header #2

B - Heather is my beautiful wife. A man can't ask for a better woman who loves the Lord, cooks a variety of great meals, is friends with nearly everyone, and raises twins to boot. I'm a fortunate man to have her as my wife.

Watch the Other Sections Close #3

C - What fun colors in the table. Yep, it's back to table based design.

Here's another paragraph tag inside the section.

Here's the last paragraph

We Can Do This All Day #4

D - Want some variety in your life. Simply click on the section headers and see what's inside. Each one is unique and specially crafted for maximum impact.

HTML

<h3 class="section_header" onClick="section1()">Click This Section Header #1</h3>
<div id="firstContentDiv" class="hidden_content">
<p>A - This is text written inside a paragraph tag....</p>
</div>

Note: Each section has the ID of "firstContentDiv" or "secondContentDiv" etc. Then the class, "hidden_content" is applied.

Javascript

window.onload=function(){
section1();
}

Note: the previous code calls section1 funtion on page load. Otherwise, all sections would be visible onpageload.

function section1() {
document.getElementById("firstContentDiv")
.style.display="block";
document.getElementById("secondContentDiv")
.style.display="none";
document.getElementById("thirdContentDiv")
.style.display="none";
document.getElementById("fourthContentDiv")
.style.display="none";
}

Note: It's a matter of changing the ContentDivs accordingly to either show or hide depending on which is selected.