Download "Show/Hide content" script

Put this into your <HEAD> section

	<style type="text/css">
	body{
		/*
		You can remove these four options 
		
		*/
		background-image:url('http://www.dhtmlgoodies.com/images/heading3.gif');
		background-repeat:no-repeat;
		padding-top:85px;	
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		
		margin:10px;
		padding-left:0px;
		text-align:left;
	}

	/* Layout properties for your question  */
	.question{
		font-weight:bold;	/* Bold font */		
		color: #FF0000;		/* The questions is in red */
		cursor:pointer;		/* Cursor is like a hand when someone rolls the mouse over the question */
	}
		
	.answer{
		/* Layout properties - You can change these */
		
		border: 1px solid #555555;
		padding:3px;
		width:500px;
		background-color:#E2EBED;
		
		/* This one should not be changed */
		display:none;	
	}
	
	</style>
	
	<script type="text/javascript">
	/*
	(C) www.dhtmlgoodies.com, September 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	*/	
	function showHideAnswer()
	{
		var numericID = this.id.replace(/[^\d]/g,'');
		var obj = document.getElementById('a' + numericID);
		if(obj.style.display=='block'){
			obj.style.display='none';
		}else{
			obj.style.display='block';
		}		
	}
	
	
	function initShowHideContent()
	{
		var divs = document.getElementsByTagName('DIV');
		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='question'){
				divs[no].onclick = showHideAnswer;
			}	
			
		}	
	}
	
	window.onload = initShowHideContent;
	</script>

Put this example code into your <BODY> section

<div id="q1" class="question">- How does this work ?</div>
<div id="a1" class="answer">This is done by use of <divs> and altering the css attribute "display"</div>

<div id="q2" class="question">- Where can I find this script?</div>
<div id="a2" class="answer">You can find this and alot of other scripts at www.dhtmlgoodies.com.</div>

<div id="q3" class="question">- Is it easy to implement?</div>
<div id="a3" class="answer">Yes it is, the only thing you have to do is to put some lines of CSS and Javascript into your <HEAD> section. 
Then, you define your questions and answers easily like this:<br>
<div id="q2" class="question">What's your name?</div><br>
<div id="a2" class="answer">My name is John Doe.</div>

How to use

You define your questions and answers like this:
<div id="q1" class="question">- How does this work ?</div>
<div id="a1" class="answer">This is done by use of <divs> and altering the css attribute "display"</div>

I.e. two simple divs, where the first one got the id "q1" and the second one the id "a1". "1" indicates that this is the first question. Q&A number 2 should have the id "q2" and "a2". The first div should be assigned to the class "question" and the second one the "answer" class.

The script is initialized by the initShowHideContent() function. This function is executed as an window onload event. If you allready have a onload event, you could replace the line window.onload = initShowHideContent; with either <BODY onload="initShowHideContent()"> or a direct call to the function below your last q&a divs. example:
<SCRIPT type="text/javascript">
initShowHideContent()
</SCRIPT>

Comments

How do I set expandMultiple to false?

Mark E at 06:13PM, 2011/03/12.

This doesn't seem to work in IE9. But works fine in FF 4 and Chrome (12.0.742.100). Thanks for the work, nice simple text slider.

Bluehound at 06:33PM, 2011/06/24.

When the first linked is clicked it's true that the first div is shown but when the second link is clicked the first div should hide and second div should show up. how come both are visible at the same time?

Sameer at 09:17AM, 2012/07/29.