modified HTML
Code:
<h2>Demo 1</h2>
<div><a href="javascript:bobexample.sweepToggle('contract')">Contract All</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expand All</a></div>
<h3 id="bobcontent1-title" class="handcursor">What is JavaScript?</h3>
<div id="bobcontent1" class="switchgroup1">
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>
<h3 id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
<div id="bobcontent2" class="switchgroup1">
Java is completely different from JavaScript.
The former is a compiled language while the later is a scripting language.
</div>
<h3 id="bobcontent3-title" class="handcursor">What is DHTML?</h3>
<div id="bobcontent3" class="switchgroup1">
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 id="tst" ></div>
<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. REQUIRED
var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init('tst')
</script>
modified init function
Code:
switchcontent.prototype.init=function(id){
var instanceOf=this
this.collectElementbyClass(this.className) //Get all headers and its corresponding content based on shared class name of contents
if (this.headers.length==0) //If no headers are present (no contents to switch), just exit
return
//If admin has changed number of days to persist from current cookie records, reset persistence by deleting cookie
if (this.persistType=="days" && (parseInt(switchcontent.getCookie(this.className+"_dtrack"))!=this.persistDays))
switchcontent.setCookie(this.className+"_d", "", -1) //delete cookie
// Get ids of open contents below. Four possible scenerios:
// 1) Session only persistence is enabled AND corresponding cookie contains a non blank ("") string
// 2) Regular (in days) persistence is enabled AND corresponding cookie contains a non blank ("") string
// 3) If there are contents that should be enabled by default (even if persistence is enabled and this IS the first page load)
// 4) Default to no contents should be expanded on page load ("" value)
var opencontents_ids=(this.persistType=="session" && switchcontent.getCookie(this.className)!="")? ','+switchcontent.getCookie(this.className)+',' : (this.persistType=="days" && switchcontent.getCookie(this.className+"_d")!="")? ','+switchcontent.getCookie(this.className+"_d")+',' : (this.expandedindices)? ','+this.expandedindices+',' : ""
for (var innercontent,i=0; i<this.headers.length; i++){ //BEGIN FOR LOOP
if (typeof this.ajaxheaders["header"+i]!="undefined"){ //if this is an Ajax header
this.headers[i].ajaxstatus='waiting' //two possible statuses: "waiting" and "loaded"
this.headers[i].ajaxfile=this.ajaxheaders["header"+i]
}
innercontent=document.getElementById(this.headers[i].id.replace("-title", "")); //Reference content container for this header
if (innercontent&&document.getElementById(id)){
document.getElementById(id).appendChild(innercontent);
}
if (typeof this.statusOpen!="undefined") //If open/ closing HTML indicator is enabled/ set
this.headers[i].innerHTML='<span class="status"></span>'+this.headers[i].innerHTML //Add a span element to original HTML to store indicator
if (opencontents_ids.indexOf(','+i+',')!=-1){ //if index "i" exists within cookie string or default-enabled string (i=position of the content to expand)
this.expandcontent(this.headers[i]) //Expand each content per stored indices (if ""Collapse Previous" is set, only one content)
if (this.collapsePrev) //If "Collapse Previous" set
this.prevHeader=this.headers[i] //Indicate the expanded content's corresponding header as the last clicked on header (for logic purpose)
}
else {//else if no indices found in stored string
this.contractcontent(this.headers[i]) //Contract each content by default
}
this.headers[i].onclick=function(){instanceOf.toggledisplay(this)}
} //END FOR LOOP
switchcontent.dotask(window, function(){instanceOf.rememberpluscleanup()}, "unload") //Call persistence method onunload
}
simpler just change the HTML
Code:
<h2>Demo 1</h2>
<div><a href="javascript:bobexample.sweepToggle('contract')">Contract All</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expand All</a></div>
<h3 id="bobcontent1-title" class="handcursor">What is JavaScript?</h3>
<h3 id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
<h3 id="bobcontent3-title" class="handcursor">What is DHTML?</h3>
<div id="tst" >
<div id="bobcontent1" class="switchgroup1">
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 id="bobcontent2" class="switchgroup1">
Java is completely different from JavaScript.
The former is a compiled language while the later is a scripting language.
</div>
<div id="bobcontent3" class="switchgroup1">
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>
switch content script - content appear in different DIV
Reply With Quote
Bookmarks