»
EnglishFrenchVietnamese

Print - Contractable Headers - JavaScriptBank.com

Full version: jsB@nk » Form » Contractable Headers
URL: http://www.javascriptbank.com/expandable-headers.html

Contractable Headers © JavaScriptBank.comThis is ideal for such things as lists of links and so forth. The visitor with Internet Explorer 4.x sees only the headers, and need only click on the subject that interests him to expand that particular section. Any type of content can be hidden; here I've used a definition list and a table. A second click on the section header contracts it again. Browsers other than Internet Explorer 4.x show the contents fully expanded, so the script degrades well.

Full version: jsB@nk » Form » Contractable Headers
URL: http://www.javascriptbank.com/expandable-headers.html



JavaScript
<SCRIPT language=JavaScript1.2><!--/*Contractable Headers script- By Website Abstraction(www.wsabstract.com)Over 200+ free JavaScripts here!*/var head="display:''"function doit(header){var head=header.styleif (head.display=="none")head.display=""elsehead.display="none"}//--></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<H2 title="Click here to expand/contract!" style="CURSOR: hand" onclick=doit(document.all[this.sourceIndex+1])>Some JavaScript Links</H2><SPAN style="DISPLAY: none; head: "><DL style="text-align: left;">  <DT><A   href="http://developer.netscape.com/docs/manuals/communicator/jsguide4/index3.htm"   target=_top>Netscape</A>  <DD>The official source about JavaScript   <DT><A href="http://javascriptsource.com/" target=_top>The JavaScript Source</A>  <DD>Lots of good examples   <DT><A href="http://www.ce.net/users/ryan/java/" target=_top>The Unofficial JavaScript Resource Center</A>   <DD>Some useful examples   <DT><A href="http://www.coolshare.com/html/" target=_top>JAVAZOO</A>   <DD>A page stuffed with JavaScript examples   <DT><A href="http://javascript.developer.com/" target=_top>Gamelan JavaScript Pages</A>   <DD>A truly excellent collection of links to JavaScript pages and collections   <DT><A href="http://www.freqgrafx.com/411/library.html">Snippet Library</A>   <DD>A fine collection of scripts   <DT><A href="http://www.geocities.com/SiliconValley/7116/">JavaScript Planet</A>   <DD>Some nice scripts   <DT><A href="http://irt.org/">IRT.ORG</A>   <DD>An excellent collection of articles and scripts. </DD></DL></SPAN><H2 title="Click here to expand/contract!" style="CURSOR: hand" onclick=doit(document.all[this.sourceIndex+1])>Some DHTML Links</H2><SPAN style="DISPLAY: none; head: "><TABLE cellSpacing=10 cellPadding=2>  <TBODY>  <TR>    <TD><A href="http://www.microsoft.com/workshop/author/dhtml/">Microsoft&#39;s Site Builder Network<BR>-Dynamic HTML</A></TD>    <TD><A href="http://www.dhtmlzone.com/index3.html">Macromedia&#39;s DHTML Zone</A></TD></TR>  <TR>    <TD><A       href="http://developer.netscape.com/library/documentation/communicator/dynhtml/index3.htm">Dynamic HTML in Netscape Communicator</A></TD>    <TD><A href="http://www.erols.com/jrule/dhtml/">DHTML Demos</A></TD></TR>  <TR>    <TD><A href="http://www.insidedhtml.com/home.htm">Inside DHTML</A></TD>    <TD><A href="http://members.tripod.com/~dynduo/">The Dynamic Duo</A></TD></TR>  <TR>    <TD><A href="http://www.webreference.com/dhtml/">Dynamic HTML Lab</A></TD>    <TD><A href="http://webcoder.com/">WebCoder.com</A></TD></TR>  <TR>    <TD><A href="http://rapid.wrox.co.uk/webdev/BookList.asp">The Wrox Web-Developer<BR>Books and Samples Page</A></TD>    <TD><A href="http://www.projectcool.com/developer/">Project Cool<BR>Developer Zone</A></TD></TR></TBODY></TABLE></SPAN><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->