[10] This article by Liberty; first published Feb 18 2007; written Feb 18 2007; last modified Feb 18 2007; last updated Feb 18 2007
[20] Note for me: create a global css with a meta (Page Info) header ; [20.1] Header style 1: shown by default (like this) with a border and small text; [20.2] Header style 2: hidden by default, show a "Show Meta" button\link - maybe call it SHOW PAGE INFO instead ?
[20.3] Global Page Info could also have a complete list of updates with comments, just like a wiki.
[30] Further, for accessibility purposes, the meta should be coded at the BOTTOM OF THE PAGE, then use css to display it as the header of the page! (or maybe as the right hand side of the page? as a right-side column?)
[40]Actually, strike that. Page Author and Page Published date _should_ appear at the top, as it is necessary info for reading the rest of the page in context (i.e. if this page is very old, it may no longer be relevant or accurate).
Further, if you hide page info, page author and published date should still be visible on their own.

[40] Note: make lyberty.com/ref/ for reference or iframe includes, e.g. css style syntax [http://lyberty.com/ref/border/] ; or just use www.w3schools.com/css/css_border.asp ?
[50] Note: this div has border-width declaration; does it override div class ? (border:none;) Answer: yes, if you use it correctly (style="border-style: solid;border-width: 2; border-color:black;") [60] make todo list
[70] download the internet

option 1

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
   var obj = document.layers ? document.layers[szDivID] :
   document.getElementById ?  document.getElementById(szDivID).style :
   document.all[szDivID].style;
   obj.visibility = document.layers ? (iState ? "show" : "hide") :
   (iState ? "visible" : "hidden");
}
   // obj.visibility = document.layers ? iState ? "show" : "hide" : iState ? "visible" : "hidden";
// -->
</script>

(note div above is not a box because it only uses the <code span, not a <div span.)

What this means (extra):
// IE 5 and later use "document.getElementById", so IF BROWSER KNOWS OF OR FINDS (document.getElementById) else if(document.getElementById) //gecko + IE 5+ THEN RUN

	 { 
VARIABLE statement; the VAR "obj" is set to FIND THE DIV CALLED "szDivID"
    var obj = document.getElementById(szDivID); 
THEN, SET THE VISIBILITY OF THAT OBJECT (set 'obj.style.visibility')
  TO " iState? "visable" OR "hidden" (??)
     obj.style.visibility = iState ? "visible" : "hidden"; 
	 } 


This option is displayed here:

Click here to show div
 | 
click here to hide div

| NOTE : THE ONE THAT ENDED UP WORKING IS ADAPTED FROM
| http://javascript.internet.com/page-details/division-control.html ;
| USES CSS .myLayersClass { position: relative; visibility: hidden; }
| AND onClick="show(true,'demodiv');"


| onClick:toggleBox(szDivID, iState)
| click me
| Source:
| http://www.geocities.com/technofundo/tech/js/showhide.html |
| probably out of date
|
|
       /* This must also be in <head> and </head> part of the HTML. */

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
   var obj = document.layers ? document.layers[szDivID] :
   document.getElementById ?  document.getElementById(szDivID).style :
   document.all[szDivID].style;
   obj.visibility = document.layers ? (iState ? "show" : "hide") :
   (iState ? "visible" : "hidden");
}
// -->
</script>
 

| |