Sandeep's Nook: JavaScript Page

Collapsible Text with Memory

Given below is an example of the Collapsible Text with Memory script. Just click the three headers "Example & Explanation", "Compatibility" and "Notes" to see the script work. To test the memory function of this script just click any of the headers to open the hidden text. Then click this link that will take you back to the page from where you came here. When you click the link again to come to this page you shall see the same collapsible text open.

1] Example & Explanation:

This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers. Clicking on the header when the text is seen hides the text. If a header is clicked it will automatically close any open text related to any other header while opening its own hidden text. Additionaly this script remembers whether any of the collapsible text topics was open if the users were to go to another page and come back to page containing the collapsible text.

2] Compatibility:

This script works with all the newer versions of browsers like IE5+, NS6, Opera and Firefox.
This script does not work with older browsers like NSv4.x but degrades very well.

3] Notes:

This is one of the most compact scripts of this nature that you can find in any JavaScript archives.

Note: It should be noted that when users choose to print the page all the hidden text will automatically be made visible in the printed document.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

<script language="JavaScript" type="text/javascript">



<!--
var exp = 1;   // the number at the left reflects the number of days for the cookie to last
               // modify it according to your needs

function newCookie(name,value,days) {
 if (days) {
   var date = new Date();
   date.setTime(date.getTime()+(days*24*60*60*1000));
   var expires = "; expires="+date.toGMTString(); }
   else var expires = "";
   document.cookie = name+"="+value+expires+"; path=/"; }

function readCookie(name) {
   var nameSG = name + "=";
   var nuller = '';
  if (document.cookie.indexOf(nameSG) == -1)
    return nuller;

var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length); }
    return null; }

function eraseCookie(name) {
  newCookie(name,"",-1); }

if (document.getElementById) {
 document.write('<style type="text/css">.texter {display:none; border-left:white 20px solid; color:#404040; font-family:verdana,arial,helvetica,sans-serif; font-size:9pt} @media print {.texter {display:block;}}</style>') }

var divNum = new Array("a1","a2","a3");  // at the left you should add a1, a2 etc. for each header you wish to include
                                          // so if you want 4 headers you should add a1, a2, a3, a4 in the format shown
                                          // enclosed in double quotes
function openClose(theID) {
 for(var i=0; i < divNum.length; i++) {
  if (divNum[i] == theID) {
   if (document.getElementById(divNum[i]).style.display == "block") {
       document.getElementById(divNum[i]).style.display = "none";
       eraseCookie('theDIV');
   }
   else {
       document.getElementById(divNum[i]).style.display = "block";
       newCookie('theDIV', theID, exp);      
   }
  }
  else {
       document.getElementById(divNum[i]).style.display = "none";
  }
 }
}

function memStatus() {
 var num = readCookie("theDIV");
 if (num) {
   document.getElementById(num).style.display = "block"; }
}
window.onload=memStatus;
// -->
</script>

This goes in the BODY of the html file:

<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer; font-family:verdana,arial,helvetica,sans-serif; font-size:10pt"><b>1] Example & Explanation:</b></div>
 <div id="a1" class="texter">
   This is the hidden text that was revealed when the header was clicked. Such hidden text is generally
   related to the main header which opens them. You can add any number of collapsible headers. Clicking on
   the header when the text is seen hides the text. Additionally if a header is clicked it will automatically
   close any open text related to any other header while opening its own hidden text.<br /><br />
 </div>

<div onClick="openClose('a2')" style="cursor:hand; cursor:pointer; font-family:verdana,arial,helvetica,sans-serif; font-size:10pt"><b>2] Compatibility:</b></div>
 <div id="a2" class="texter">
   This script works with all the newer versions of browsers like IE5+, NS6, Opera and Firefox.<br />
   This script does not work with older browsers like NSv4.x but degrades very well.<br /><br />
 </div>

<div onClick="openClose('a3')" style="cursor:hand; cursor:pointer; font-family:verdana,arial,helvetica,sans-serif; font-size:10pt"><b>3] Notes:</b></div>
 <div id="a3" class="texter">
   This is one of the most compact scripts of this nature that you can find in any JavaScript archives.<br /><br />
 </div>