Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

How to show and hide divs using JavaScript?

innerHTML

  • Please log in to reply
3 replies to this topic

#1 Bertan

Bertan

    CC Regular

  • Member
  • PipPipPip
  • 42 posts

Posted 19 October 2011 - 07:34 AM

I have some problem getting this script to work. I want to be able to show the content for the link I am clicking on. I have tried with a for loop and text.length but all I achieved was to get nothing it all to work. I guess it is somewhere in that direction I have to go, but I will paste the code from where something actually works so you get the idea of what I am trying to achieve.

In this example the top link is working as it should but I want to apply this to all links.

Thanks for any help!

Javascript:
onload=function(){

	showContent();
	
	function showContent(){
		var text = document.getElementsByClassName("text")[0];
		var showText = document.getElementsByClassName("showText")[0];
		var newHeight = 0;
		var y = 0;
		
		text.style.display = "block";
		var firstTextHeight = text.offsetHeight;
		text.style.display = "none";
		
		text.style.height = newHeight + "px";

		showText.onclick = function(){
			text.style.display = "block";
			var textHeight = text.offsetHeight;
			if (firstTextHeight < textHeight){
				slideUp();
			} else {
				slideDown();
			}
		}
		
		function slideDown(){
			y++;
			if(y <= firstTextHeight){
				text.style.height = y + "px";
				setTimeout(slideDown, 1);
			}
			showText.innerHTML = "Slide up";
		}
		
		function slideUp(){
			y--;
			if(y >= 0){
				text.style.height = y + "px";
				setTimeout(slideUp, 1);
			} else {
				showText.innerHTML = "Slide down";
				text.style.display = "none"; 
			}
		
		}
	}
}


HTML:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script src="javascript/script.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="content">

<a href="#" class="showText">Slide down</a>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus</p>
</div>

<a href="#" class="showText">Slide down</a>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus</p>
</div>

<a href="#" class="showText">Slide down</a>
<div class="text">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque
egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque
egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus</p>
</div>

</div>
</div>
</body>
</html>


CSS:
#wrapper {
	width: 960px;
	margin: 0 auto;
}
#content {
	background: #234343;
	height: 600px;
	width: 700px;
	float: left;
	padding: 20px;
}

.showText {
	display: block;
	color: #282828;
	border: 1px solid #282828;
	width: 400px;
	background: #bbb;
	padding: 5px;
}

.text {
	overflow: hidden;
	width: 400px;
	background: #fff;
	border: 1px solid #282828;
	padding: 5px;
	display: none;
}

  • 0

#2 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1310 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 19 October 2011 - 04:47 PM

You're doing it wrong. Only the top link is working because you're only getting the top link:

...

...
var showText = document.getElementsByClassName("showText")[0];
...
...


One thing you could try is iterating through all the elements of the "text" class, along with their corresponding elements of the "showText" class, and do the same things all the while.
  • 0

#3 Bertan

Bertan

    CC Regular

  • Member
  • PipPipPip
  • 42 posts

Posted 20 October 2011 - 08:06 AM

I have this now it works for the links, but what about the content that should be shown? It is just looping through the whole for loop making the last div always show no matter what link I click.

onload=function(){

	showContent();
	
	function showContent() {
		var texts = document.getElementsByClassName("text");
		var showTexts = document.getElementsByClassName("showText");
		var y = 0;

		for (var i = 0; i < showTexts.length; i++) {
			var showText = showTexts[i];
			
			var text = texts[i];
			text.style.display = "block";
			var firstTextHeight = text.offsetHeight;
			text.style.display = "none";
			
			showText.onclick = showCommments;	
		}

				
		function showCommments() {
			text.style.display = "block";
			var textHeight = text.offsetHeight;
			if (firstTextHeight < textHeight){
				slideUp();
			} else {
				slideDown();
			}
			
			function slideDown(){
				y++;
				if(y <= firstTextHeight){
					text.style.height = y + "px";
					setTimeout(slideDown, 1);
				}
				showText.innerHTML = "Hide";
			}
				
			function slideUp(){
				y--;
				if(y >= 0){
					text.style.height = y + "px";
					setTimeout(slideUp, 1);
				} else {
					showText.innerHTML = "Show";
					text.style.display = "none"; 
				}				
			}
		}		
	}
}

  • 0

#4 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1310 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 21 October 2011 - 01:02 PM

...

...
			var showText = showTexts[i];
			
			var text = texts[i];
...


The problem now is that in the last iteration of the 'for' loop, 'text' and 'showText' are set to the last elements of the 'texts' and 'showTexts' arrays, respectively.

...

...
showText.onclick = showCommments;
...


Instead of this, you can try something like
showText.onclick= Function ("showComments (" + i + ");");
, and then instead of this:

...

...
function showCommments() {
...

, you could try this:
function showComments (index){ 
	text= texts[index]; 
	showText= showTexts[index];

  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download