Home Dynamic Content Switch Content Script Developer's View
<html>
<head>
<script type="text/javascript" src="switchcontent.js"
>
/***********************************************
* Switch Content script- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<style type="text/css">
/*Style sheet used for demo. Remove if desired*/
.handcursor{
cursor:hand;
cursor:pointer;
}
</style>
</head>
<body>
<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>
<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()
</script>
<h2>Demo 2</h2>
<h3 id="joecontent1-title" class="handcursor">What is JavaScript?</h3>
<p id="joecontent1" class="switchgroup2">
</p>
<h3 id="joecontent2-title" class="handcursor">Difference betwen Java &
JavaScript?</h3>
<p id="joecontent2" class="switchgroup2">
</p>
<h3 id="joecontent3-title" class="handcursor">What is DHTML?</h3>
<p id="joecontent3" class="switchgroup2">
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.
</p>
<script type="text/javascript">
var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch
contents to just "p" elements
joeexample.setStatus('[open] ', '[closed] ')
joeexample.setColor('green', 'red')
joeexample.collapsePrevious(false) //Allow more than 1 content to be open
simultanously
joeexample.setPersist(false)
joeexample.defaultExpanded(0,1)
joeexample.setContent(0, 'whatisjavascript.htm') //specify remote content for
1st header's content
joeexample.setContent(1, 'whatisjava.htm') //specify remote content for 2nd
header's content
joeexample.init()
</script>
</body>
</html>