Contractible Headers - Source Code - JsMadeEasy.com

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Contractible Headers
A script that makes all headers in a page contractible in IE 4.x. All other browsers, including NS 4.x, will see the headers uncontracted (degrades well).
Header 1 This is content under Header 1. Header 2


Insert into <HEAD>
<script language="JavaScript1.2"> <!-- /Contractable Headers script- ! / var head="display:''" function doit(header){ var head=header.style if (head.display=="none") head.display="" else head.display="none" } //--> </script>

Insert into <BODY>
<h1 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])">Header 1</h1> <span style="display:none" style=&{head};> This is content under Header 1. </span> <h1 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])">Header 2</h1> <span style="display:none" style=&{head};> This is content under Header 2. </span>

Other Options
To insert additional headers, simply insert more of the below to the above: <h1 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])">Header 1</h1> <span style="display:none" style=&{head};> This is content under Header 1. Insert any thing in here, such as text, tables, etc.. </span> With the parts in red representing the parts you should change to reflect your own layout.