Announcement

**Willy Duitt** · Feb 24, 2004, 03:05 PM

This is more of a CSS problem than a javascript problem but, as
the original script had done, I did use javascript to document
write the style changes I have made.

Try this:

Code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en-US">
  <head>
    <title>Your Page Title</title>
<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
* Visit [url]http://www.dynamicdrive.com/[/url] for full source code
* Stylesheet modified by: [email][email protected][/email] on February 24, 2004
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
    with(document){
    writeln('<style type="text/css">   ');
    writeln('<!--                      ');
    writeln('.content{                 ');
    writeln('     display: none;       ');
    writeln('     float: none;         ');
    writeln('     border: none;        ');
    writeln('     margin: none;        ');
    writeln('     font-size  : 20px;   ');
    writeln('     font-weight: 100;    ');
    writeln('     color : blue;        ');
    writeln('     background: #90ee90; ');
    writeln('     }                    ');

    writeln('.left{                    ');
    writeln('     float : left;        ');
    writeln('     border: none;        ');
    writeln('     margin: none;        ');
    writeln('     font-size  : 20px;   ');
    writeln('     font-weight: 900;    ');
    writeln('     color : red;         ');
    writeln('     cursor: hand;        ');
    writeln('     cursor: pointer;     ');
    writeln('     }');

    writeln('.right{                   ');
    writeln('     width: 100%;         ');
    writeln('     float: left;         ');
    writeln('     border: none;        ');
    writeln('     margin: none;        ');
    writeln('     line-height: 1px;    ');
    writeln('}                         ');
    writeln('-->                       ');
    writeln('</style>                  ');
  }
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
getElementbyClass("content")
if (enablepersist=="on" && typeof ccollect!="undefined")
revivecontent()
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>
</HEAD>

<BODY>
[color=blue]<div [/color][color=red]class="left"[/color][color=blue]>
<a onClick="expandcontent('sc1')">What is JavaScript? </a></div>
<div id="sc1" [/color][color=red]class="content"[/color][color=blue]> JavaScript is a scripting language originally
developed by Netscape to add interactivity and power to web documents. It is
purely client side, and runs completely on the client's browser and computer.</div>
<div [/color][color=red]class="right"[/color][color=blue]>&amp;nbsp;</div>[/color]

<div class="left">
<a onClick="expandcontent('sc2')">Difference betwen Java & JavaScript? </a></div>
<div id="sc2" class="content"> Java is completely different from JavaScript-
the former is a compiled language while the later is a
scripting language.</div>
<div class="right">&amp;nbsp;</div>

<div class="left">
<a onClick="expandcontent('sc3')">What is DHTML? </a></div>
<div id="sc3" class="content"> DHTML is the embodiment of a
combination of technologies- JavaScript, CSS, and HTML. Through
them a new level of interactivity is possible for the end user
experience.</div>
<div class="right">&amp;nbsp;</div>

</body>
</html>

Note: Each content section has three classes. left, content and right.

.....Willy

Announcement

Modify Contractible Headers??

Modify Contractible Headers??

Comment