View Full Version : Contractible Headers Script Help Needed

04-07-2008, 10:20 PM
Script: Contractible Headers Script


Hi, is it possible to put all the text in the script in a .js file? Cause its taking up quite alot of space or do i have to keep it this way?

Also, how do i get rid of the "enter" between my headers?


04-07-2008, 10:55 PM
You should use Switch Content script (http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm), which is a more robust version of the above that should do both of what you're asking above a lot easier.

04-07-2008, 11:13 PM
Hm, the enters between the headers are also present in the Switch Content Script, can you remove them there?

04-08-2008, 12:38 AM
Yes, with a little tweaking apparently though. First, you'd change both the headers and the content wrappers to SPAN tags. A full example:

<script type="text/javascript" src="switchcontent.js" >

* Switch Content script- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code


<style type="text/css">

/*Style sheet used for demo. Remove if desired*/



<h2>Demo 1</h2>

<div><a href="javascript:bobexample.sweepToggle('contract')">Contract All</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expand All</a></div>

<span id="bobcontent1-title" class="handcursor">What is JavaScript?</span> <span 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.

<br /><br />

<span id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</span>
<span id="bobcontent2" class="switchgroup1">
Java is completely different from JavaScript.
The former is a compiled language while the later is a scripting language.

<br /><br />

<span id="bobcontent3-title" class="handcursor">What is DHTML?</span>
<span 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.

<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", "span") //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.collapsePrevious(true) //Only one content open at any given time

Then inside switchcontent.js, do a search and replace, replacing all instances of "block" with "inline" instead.

04-08-2008, 02:04 AM
hm i did what you said and i got rid of some enters but not the one i wanted :s, i get this now :


04-08-2008, 03:03 AM
Remove the <br/> tags.

04-08-2008, 02:01 PM
omg, it was that simple lmao, thx rangana.