Swap Panels With Javascript & CSS Tutorial

View Demo

Christian Snodgrass posted this awesome technique at the SitePoint forum a while ago. And being the pack-rat that I am, I made sure I grabed it. Along the way, I spruced up the CSS/HTML a bit making it a little easier to understand. Recently, I put it to some good use and it turned out really nice, as seen here in a site I did for myself (click on numbers 1 - 9). Thanks Christian - your the man!

The Script

/*********************************************************************
* Changing Panels
* Created by: Christian Snodgrass
* http://www.arwebdesign.net
* http://www.arwebdesign.net/csnodgrass
**********************************************************************
* This script allows you to create panels which can easily swap out
* with others, in a method that can gracefully degrade.
**********************************************************************
* These may be used for any purpose, free of charge.
* The only condition is that this header must remain intact in it's
* entirety.
*********************************************************************/
function ChangingPanels(var_name) {
	this.name = var_name;
}
ChangingPanels.prototype.name = "";
ChangingPanels.prototype.panels = Array();
ChangingPanels.prototype.links = Array();
ChangingPanels.prototype.addPanel = function(id, link_id) {
	this.panels.push(id);
	this.links.push(link_id);
	document.getElementById(id).style.display = "none";
	document.getElementById(link_id).onclick = this.togglePanel;
	document.getElementById(link_id).var_name = this.name;
	document.getElementById(link_id).panel = id;
}
ChangingPanels.prototype.displayPanel = function(id) {
	// Hide any visible panels.
	for(var i=0; i < this.panels.length; i++)
		document.getElementById(this.panels[i]).style.display = "none";
	// Show the one we want.
	document.getElementById(id).style.display = "block";
}
ChangingPanels.prototype.togglePanel = function() {
	var panels = window[this.var_name];
	panels.displayPanel(this.panel);
}
var panels = new ChangingPanels("panels");
panels.addPanel("p1","p1-link");
panels.addPanel("p2","p2-link");
panels.addPanel("p3","p3-link");
panels.addPanel("p4","p4-link");
panels.addPanel("p5","p5-link");
panels.displayPanel("p1");

However, you may find, as I did, that if you have alot of info in your hidden divs (like 12 images in each of 9 hidden divs like I did), that the hidden divs may initially display for a couple of seconds before the script is able to fire and hide them. You "can" simply use CSS to hide then (e.g. display:none;) but then it does not degrade gracefully. In the event that JS is off, all the hidden panels would remain hidden. So I came up with this nifty little solution! This fires "before" the page loads and hides the hidden divs (via display:none;), but only if JS is enabled! Then the swapping panels script brings them back to display:block when called upon. Works perfect in all browsers!

Steps: Edit to suit, place this little snippet in an external JS file (because it does not validate), and link to it by placing the link in the head of you document as I did in the CSS/HTML code below. If you want to place it in your page as an inline script, and you care about validation, then simply add a backwards slash to the end style tag like this (e.g. <\/style>). That still works perfect and it validates!

// hide panels from displaying on page load
document.write('<style>#p2, #p3, #p4, #p5{ display:none }</style>');

The HTML/CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Swap Panels With Javascript & CSS</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
	text-align:center;
	margin:15px 0 0;
}
h1 {
	margin:10px 15px;
}
a {
	text-decoration:none;
	font-weight:bold;
	color:#000;
	outline:0;
}
a:active, a:focus, a:hover {
	text-decoration:underline;
}
#wrapper {
	width:760px;
	height:500px;
	background:#CCC;
	padding:20px;
	margin: 20px auto;
	border:2px solid black;
}
#nav {
	width:120px;
	height:500px;
	background:#999;
	float:left;
	border:2px solid black;
}
#panels {
	float:right;
	width:615px;
	height:502px;
	background:#EEE;
}
#panels div {
	height:500px;
	border:2px solid black;
}
-->
</style> 
<script type="text/javascript" src="javascript/hide-panels.js"></script>
</head>

<body>
<div id="wrapper">

<div id="nav">
	<ul>
	   <li id="p1-link"><a href="#">Panel 1</a></li>
	   <li id="p2-link"><a href="#">Panel 2</a></li>
	   <li id="p3-link"><a href="#">Panel 3</a></li>
	   <li id="p4-link"><a href="#">Panel 4</a></li>
	   <li id="p5-link"><a href="#">Panel 5</a></li>
	</ul>
</div>

<div id="panels">
	<div id="p1">
	   <h1>Panel 1</h1>
	</div>
	<div id="p2">
	   <h1>Panel 2</h1>
	</div>
	<div id="p3">
	   <h1>Panel 3</h1>
	</div>
	<div id="p4">
	   <h1>Panel 4</h1>
	</div>
	<div id="p5">
	   <h1>Panel 5</h1>
	</div>
</div>

</div><!-- end #wrapper -->
<script type="text/javascript" src="javascript/swap-panels.js"></script>
</body>
</html>

EDIT: Oopps, I forgot to include something. Highlight The Current Page (or in this case panel) With Javascript! I'm sure you'll find this as helpful as once did. Your welcome - have fun!

ADVERTISE HERE