Show or Hide a div with JavaScript

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 426,663 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 1,509 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3316 | Replies: 1

•

Join Date: Feb 2008

Posts: 7

Reputation: tarsem is an unknown quantity at this point

Rep Power: 0

Solved Threads: 1

tarsem

Offline

Newbie Poster

Show or Hide a div with JavaScript

Mar 31st, 2008

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show hide content with sliding effect</title>
<meta name="language" content="English">
<meta name="robots" content="follow">
<meta name="googlebot" content="index, follow">
<style type="text/css">

body{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
	margin:0px;
	
}

.ad{
	position:absolute;
	top:10px;
	right:10px;
}

.dhtmlgoodies_question{	/* Styling question */
	/* Start layout CSS */
	color:#FFF;
	font-size:0.9em;
	background-color:#317082;
	width:430px;
	margin-bottom:2px;
	margin-top:2px;
	padding-left:2px;
	background-image:url('images/bg_answer.gif');
	background-repeat:no-repeat;
	background-position:top right;	
	height:20px;
	
	/* End layout CSS */
	
	overflow:hidden;
	cursor:pointer;
}
.dhtmlgoodies_answer{	/* Parent box of slide down content */
	/* Start layout CSS */
	border:1px solid #317082;
	background-color:#E2EBED;
	width:400px;
	
	/* End layout CSS */
	
	visibility:hidden;
	height:0px;
	overflow:hidden;
	position:relative;

}
.dhtmlgoodies_answer_content{	/* Content that is slided down */
	padding:1px;
	font-size:0.9em;	
	position:relative;
}

</style>
<script type="text/javascript">

var dhtmlgoodies_slideSpeed = 10;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

	objectIdToSlideDown = false;
	
	if(!answerDiv.style.display || answerDiv.style.display=='none'){		
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{
			
			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';
			
			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}	
}

function slideContent(inputId,direction)
{
	
	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
	}else{
		if(height<=1){
			obj.style.display='none'; 
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
			}else{
				dhtmlgoodies_slideInProgress = false;
			}
		}else{
			dhtmlgoodies_activeId = inputId;
			dhtmlgoodies_slideInProgress = false;
		}
	}
}



function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dhtmlgoodies_question'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'dhtmlgoodies_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'dhtmlgoodies_a'+divCounter;	
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
			contentDiv.className='dhtmlgoodies_answer_content';
			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}		
	}	
}
</script>


</head>
<body>
		<br>

<img src="/images/heading3.gif">
<div class="dhtmlgoodies_question">Q: What are the advantages of table less design?</div>
<div class="dhtmlgoodies_answer">
	<div>
		Ohh! There are so many:
		<ul>
			<li>Faster loading pages</li>
			<li>Smoother loading pages</li>
			<li>Saved bandwidth</li>

			<li>Separate layout from content</li>
			<li>Easy to change layout</li>
			<li>Increased accessibility</li>
			<li>Different styling for different media(print, screen, pda)</li>
		</ul>
	</div>
</div>

<div class="dhtmlgoodies_question">Q: What is the difference between &lt;DIV> and &lt;SPAN> ?</div>
<div class="dhtmlgoodies_answer">
	<div>
		DIV is a block element while SPAN is an inline element. What's common to them both is that none of them have any default styling.
	</div>
</div>
<div class="dhtmlgoodies_question">Q: What kind of site is dhtmlgoodies.com ?</div>
<div class="dhtmlgoodies_answer">
	<div>
		dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland. Here, you will find a lot of 
		DHTML scripts you can use freely to enhance your website.
	</div>

</div>
<script type="text/javascript">
initShowHideDivs();
showHideContent(false,1);	// Automatically expand first item
</script>
<!-- Kontera ContentLink -->
<script type="text/javascript">
var dc_UnitID = 14;
var dc_PublisherID = 33781;
var dc_AdLinkColor = 'blue';
var dc_isBoldActive= 'no';
var dc_adprod='ADL';
</script>
<script type="text/javascript" 
src="http://kona.kontera.com/javascript/lib/KonaLibInline.js"></script>
<!-- Kontera ContentLink -->
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show hide content with sliding effect</title>
<meta name="language" content="English">
<meta name="robots" content="follow">
<meta name="googlebot" content="index, follow">
<style type="text/css">

body{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
	margin:0px;
	
}

.ad{
	position:absolute;
	top:10px;
	right:10px;
}

.dhtmlgoodies_question{	/* Styling question */
	/* Start layout CSS */
	color:#FFF;
	font-size:0.9em;
	background-color:#317082;
	width:430px;
	margin-bottom:2px;
	margin-top:2px;
	padding-left:2px;
	background-image:url('images/bg_answer.gif');
	background-repeat:no-repeat;
	background-position:top right;	
	height:20px;
	
	/* End layout CSS */
	
	overflow:hidden;
	cursor:pointer;
}
.dhtmlgoodies_answer{	/* Parent box of slide down content */
	/* Start layout CSS */
	border:1px solid #317082;
	background-color:#E2EBED;
	width:400px;
	
	/* End layout CSS */
	
	visibility:hidden;
	height:0px;
	overflow:hidden;
	position:relative;

}
.dhtmlgoodies_answer_content{	/* Content that is slided down */
	padding:1px;
	font-size:0.9em;	
	position:relative;
}

</style>
<script type="text/javascript">

var dhtmlgoodies_slideSpeed = 10;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

	objectIdToSlideDown = false;
	
	if(!answerDiv.style.display || answerDiv.style.display=='none'){		
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{
			
			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';
			
			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}	
}

function slideContent(inputId,direction)
{
	
	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
	}else{
		if(height<=1){
			obj.style.display='none'; 
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
			}else{
				dhtmlgoodies_slideInProgress = false;
			}
		}else{
			dhtmlgoodies_activeId = inputId;
			dhtmlgoodies_slideInProgress = false;
		}
	}
}



function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dhtmlgoodies_question'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'dhtmlgoodies_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'dhtmlgoodies_a'+divCounter;	
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
			contentDiv.className='dhtmlgoodies_answer_content';
			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}		
	}	
}
</script>


</head>
<body>
		<br>

<img src="/images/heading3.gif">
<div class="dhtmlgoodies_question">Q: What are the advantages of table less design?</div>
<div class="dhtmlgoodies_answer">
	<div>
		Ohh! There are so many:
		<ul>
			<li>Faster loading pages</li>
			<li>Smoother loading pages</li>
			<li>Saved bandwidth</li>

			<li>Separate layout from content</li>
			<li>Easy to change layout</li>
			<li>Increased accessibility</li>
			<li>Different styling for different media(print, screen, pda)</li>
		</ul>
	</div>
</div>

<div class="dhtmlgoodies_question">Q: What is the difference between &lt;DIV> and &lt;SPAN> ?</div>
<div class="dhtmlgoodies_answer">
	<div>
		DIV is a block element while SPAN is an inline element. What's common to them both is that none of them have any default styling.
	</div>
</div>
<div class="dhtmlgoodies_question">Q: What kind of site is dhtmlgoodies.com ?</div>
<div class="dhtmlgoodies_answer">
	<div>
		dhtmlgoodies.com is a private site developed and maintained by Alf Magne Kalleland. Here, you will find a lot of 
		DHTML scripts you can use freely to enhance your website.
	</div>

</div>
<script type="text/javascript">
initShowHideDivs();
showHideContent(false,1);	// Automatically expand first item
</script>
<!-- Kontera ContentLink -->
<script type="text/javascript">
var dc_UnitID = 14;
var dc_PublisherID = 33781;
var dc_AdLinkColor = 'blue';
var dc_isBoldActive= 'no';
var dc_adprod='ADL';
</script>
<script type="text/javascript" 
src="http://kona.kontera.com/javascript/lib/KonaLibInline.js"></script>
<!-- Kontera ContentLink -->
</body>
</html>

Last edited by tarsem : Mar 31st, 2008 at 7:44 am.

•

Join Date: Dec 2004

Location: London or Slovakia

Posts: 2,461

Reputation: peter_budo is a jewel in the rough

Rep Power: 11

Solved Threads: 296

peter_budo peter_budo is offline

Offline

Code tags enforcer

Re: Show or Hide a div with JavaScript

Apr 1st, 2008

Ehmm, is this a question or sugested solution for people that may want to use it in their projects?

Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.