The JavaScript Source: CSS : Page Organizer

General

Use JavaScript and CSS to hide/show elements on a page thus saving screen space.

Click here for information ...

Click here for more information ...

Click here for still more information ...

Notes

Created by: Chris Armstrong
Web Site: http://london-net.net
Posted: May 18, 2005

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: pageOrganizer.js

var subs_array = new Array("sub1","sub2","sub3");// Put the id's of your hidden divs in this array

function displaySubs(the_sub){
	 if (document.getElementById(the_sub).style.display==""){
	   document.getElementById(the_sub).style.display = "none";return
  }
  for (i=0;i<subs_array.length;i++){
	   var my_sub = document.getElementById(subs_array[i]);
	   my_sub.style.display = "none";
	 }
  document.getElementById(the_sub).style.display = "";
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.para {
  font-family: "Verdana","Arial","sans-serif";
  font-size: 10pt;
}

a.headings:link {
  color: #000000;
  text-decoration:underline;
  width:100%;
}

a.headings:visited {
  color: #aa6611;
  width:100%
}

a.headings:hover {
  color: #ff9933;
  text-decoration:none;
  width:100%
}

a.headings:active {
  color: #0000ff;
  width:100%
}

a.headings {
  background-repeat: no-repeat;
  font-family: "Verdana","arial","sans-serif";
  font-size: 10px;
}

Head

Paste this code into the HEAD section of your HTML document.


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

Body

Paste this code into the BODY section of your HTML document


<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub1')" onFocus="if(this.blur)this.blur()";>
  <strong>Click here for information ...</strong> </a> </p>
<div class="para"  id="sub1" style="display:none">
 	Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus.
</div>
<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub2')" onFocus="if(this.blur)this.blur()";>
  <strong>Click here for more information ...</strong> </a> </p>
<div class="para" id="sub2" style="display:none">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.
</div>
<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub3')" onFocus="if(this.blur)this.blur()";>
  <strong>Click here for still more information ...</strong> </a> </p>
<div class="para"  id="sub3" style="display:none">
  Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam.
</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

1. From: Bj Fulmer
reference external js file
12/10/2007 01:14:15

I love this script, but I can not get it to work an external file. I created the file and saved it as "pageOrganizer.js" and in the file I have var subs_array = new Array("sub1","sub2","sub3");// Put the id's of your hidden divs in this array

function displaySubs(the_sub){
if (document.getElementById(the_sub).style.display==""){
document.getElementById(the_sub).style.display = "none";return
}
for (i=0;i<subs_array.length;i++){
var my_sub = document.getElementById(subs_array[i]);
my_sub.style.display = "none";
}
document.getElementById(the_sub).style.display = "";
}
but it always errors out. To test the code I pasted it into my html and it works. Checked my path and name of the file and it doesn't work. I even checked viewed the source of this page a found that the js was also pasted into the html and did not refer to and external js file?

Any idea's?

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

1. From: Bj Fulmer
reference external js file
12/10/2007 01:14:15

3. From: GL
external js file
10/31/2008 12:14:54

2. From: Lee Underwood (Admin)
01/29/2008 11:40:40

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

1. From: Bj Fulmerreference external js file12/10/2007 01:14:15

3. From: GLexternal js file10/31/2008 12:14:54

2. From: Lee Underwood (Admin)01/29/2008 11:40:40

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

1. From: Bj Fulmer
reference external js file
12/10/2007 01:14:15

3. From: GL
external js file
10/31/2008 12:14:54

2. From: Lee Underwood (Admin)
01/29/2008 11:40:40