Differences

This shows you the differences between two versions of the page.

--- docs:programming:javascript:collapsible_div [2007/03/05 16:34] – (old revision restored) 127.0.0.1
+++ docs:programming:javascript:collapsible_div [2008/08/03 00:25] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ====== Collapsible DIV ======
-Original URL: http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/
+This page demonstrates how to create a collapsible div, compatible with most browsers.  If the browser has scripting disabled, the page content will simply load with all div's expanded.
-One of the most handy (and cool) tricks a web developer could learn to use is collapsible DIVs. This allows you to make a page that will only show the user what they want to see. If they’re interested in some part of content, such as a “mail to friend” or an expanded definition, they could click a link or image and make the page dynamically grow in size to show that added bit of content.
+===== Screenshot Examples =====
+==== Closed ====
+{{div_closed.png|}}
-This was inspired by some comments in a post on Aaron’s SEO Buzz Box, and while I think he might be looking for a slightly more advanced solution, it gave me the idea to type up this post.
+==== Open ====
+{{div_open.png|}}
+===== head code =====
+<code javascript>
+<script type="text/javascript">
+var sections = new Array("generalDocuments","sketchPlan","designOptions","completeSet");
+function init(){
+	// if we have javascript, set up the page accordingly
+	var i;
+	for(i=0; i<sections.length; i++){
+		toggleRoll(sections[i]);
+	}
+}
-There’s a few different bits of code we’ll use in this. First we’ll create a div we want to expand or contract. For example:
+function getElem(elemID){
+	if(document.all){
+		return document.all(elemID);
+	}else if(document.getElementById){
+		return document.getElementById(elemID);
+	}else if(document.layers){
+		return document.layers[elemID];
+	}
+}
-<code html>
+function toggleRoll(elemID){
-<div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div>
+	var elem = getElem(elemID);
-</code>
-Notice our tagging the div with a unique id. This allows our Javascript to be able to find it when we alter it’s visibility. We also added a style property, setting it’s display attribute to “none”, which makes that DIV hidden when the page loads originally.
+	if(elem.style.display != "none"){
+		elem.style.display = "none";
+		var img = getElem(elemID + "Img");
+		img.src = "_img/rflippy.gif";
+	}else{
+		elem.style.display = "block";
+		var img = getElem(elemID + "Img");
+		img.src = "_img/dflippy.gif";
+	}
-Next we’ll create a link with some inline Javascript to hide or show our div. It’s quite a bit to take in at once, but don’t worry I’ll explain it in depth in a second. Here it is:
+	// clear the user selection, in case they have mistakenly double clicked
+	if(typeof window.getSelection != "undefined"){  // Mozilla
+		var sel = window.getSelection();
+		if(sel && typeof sel.removeAllRanges != "undefined")
+			sel.removeAllRanges();
+	}else if(typeof document.selection.empty != "undefined"){  // IE
+		document.selection.empty();
+	}
+}
-<code html>
+</script>
-<a href="javascript:;" onmousedown="if(document.getElementById('mydiv').style.display == 'none'){ document.getElementById('mydiv').style.display = 'block'; }else{ document.getElementById('mydiv').style.display = 'none'; }">Toggle Div Visibility</a>
 </code>
-Whew! It’s so complicated because it’s done with inline Javascript. I’ll show an alternate method that’s much cleaner a bit later. But first, let’s tackle this. It’s a simple anchor tag, but you’ll notice the href is “javascript:;”. The purpose of this is to basically do nothing. You don’t want to direct to any other page, and if you put everything in the onmousedown property in the href property, it would work the exact same, but the user would see a mess of javascript in his status bar when he moused over the link, so this keeps it cleaner. Another common do-nothing insert to use for the href property is a pound sign (#), and while that will work, it’ll also move the user’s scroll bar to the very top of your website, which can get quite annoying.
+===== body code =====
-Note, the following explanation is very detailed and assumes virtually no knowledge of Javascript… so if this seems basic to you, feel free to skip it.
-Now, we have the href property clean so there’s nothing ugly in the status bar on mouseover, but we still need to actually do the hiding or showing of the div. We call this through the onmousedown property of the anchor tag. We can find the DIV we created earlier by document.getElementById(’mydiv’), so we decide to first check if it’s already visible or hidden by running a simple if-statement of if(document.getElementById(’mydiv’).style.display == ‘none’){. If this returns true, meaning the display property is set to none (hidden), we continue past the first bracket and change it’s display property to “block”, which means visible. This will also create a line break before and after our div, so if you want it to appear in the middle of your text or other content, without line breaks, change “block” to “inline”. Following that setting statement, we have our else block, which it run if the first clause isn’t met (the display is NOT set to ‘none’). If it’s not set to none, we assume the div is visible, so we toggle it and hide the div, setting it’s display property to “none” (hidden) again.
-An alternative which is a bit cleaner than that inline anchor tag (above) is creating a javascript function for toggling the DIV’s visibility. For this method, use the following anchor tag:
 <code html>
-<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>
+	<body onload="javascript:init();">
+		<div id="content">
+			<h1>Indian Hill Estates<span>Development Web Site</span></h1>
+			<h3 onclick="javascript: toggleRoll('generalDocuments');"><img id="generalDocumentsImg" src="_img/dflippy.gif" />General Documents</h3>
+			<div id="generalDocuments">
+			...div content...
+			</div>
+			<h3 onclick="javascript: toggleRoll('sketchPlan');"><img id="sketchPlanImg" src="_img/dflippy.gif" />Sketch Plan - 24" x 24" <em>(Current working design)</em></h3>
+			<div id="sketchPlan">
+			...div content...
+			</div>
+			<h3 onclick="javascript: toggleRoll('designOptions');"><img id="designOptionsImg" src="_img/dflippy.gif" />Potential Design Options</h3>
+			<div id="designOptions">
+			...div content...
+			</div>
+			<h3 onclick="javascript: toggleRoll('completeSet');"><img id="completeSetImg" src="_img/dflippy.gif" />Complete Drawing Set - 24" x 36" <em>(Based on original design)</em></h3>
+			<div id="completeSet">
+			...div content...
+			</div>
+			<a class="imglink" href="http://www.adobe.com/products/acrobat/readstep2.html"><img src="_img/get_adobe_reader.gif" /></a>
+		</div>
+	</body>
 </code>
-This anchor tag behaves like the above inline javascript, except instead of executing the change in the anchor tag itself (inline), it instead calls the toggleDiv function, passing the div name as a parameter.
-This anchor tag above calls the following function. Simply insert this text (the function) somewhere in your document above the link in the body tag, or in the HEAD tag of the HTML itself:
-<code html>
-<script language="javascript">
-  function toggleDiv(divid){
-    if(document.getElementById(divid).style.display == 'none'){
-      document.getElementById(divid).style.display = 'block';
-    }else{
-      document.getElementById(divid).style.display = 'none';
-    }
-  }
-</script>
-</code>
-This function does exactly what the above inline javascript does, only it’s a bit cleaner. When it’s called by the anchor tag, it checks the div with the name passed to see if it’s currently not visible (display set to “none”), and if so, it shows it by changing the display to “block”. If the original if statement fails (display is not set to “none”), then it assumes the DIV is visible and hides it again (sets the display property to “none”).