How to show and hide divs using JavaScript?

#1
Bertan

Posted 19 October 2011 - 07:34 AM

Learning Programmer

Members
43 posts

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;

}

#2
RhetoricalRuvim

Posted 19 October 2011 - 04:47 PM

JavaScript Programmer

Members
1,254 posts

Location:C:\Countries\US

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

Bertan said:

...

...

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.

#3
Bertan

Posted 20 October 2011 - 08:06 AM

Learning Programmer

Members
43 posts

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"; 

				}				

			}

		}		

	}

}

#4
RhetoricalRuvim

Posted 21 October 2011 - 01:02 PM

JavaScript Programmer

Members
1,254 posts

Location:C:\Countries\US

Bertan said:

...

...

			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.

Bertan said:

...

...

showText.onclick = showCommments;

...

Instead of this, you can try something like

showText.onclick= Function ("showComments (" + i + ");");

, and then instead of this:

Bertan said:

...

...

function showCommments() {

...

, you could try this:

function showComments (index){ 

	text= texts[index]; 

	showText= showTexts[index];

#1 Bertan Posted 19 October 2011 - 07:34 AM

#2 RhetoricalRuvim Posted 19 October 2011 - 04:47 PM

#3 Bertan Posted 20 October 2011 - 08:06 AM

#4 RhetoricalRuvim Posted 21 October 2011 - 01:02 PM

1 user(s) are reading this topic

Sign In

#1
Bertan

Posted 19 October 2011 - 07:34 AM

#2
RhetoricalRuvim

Posted 19 October 2011 - 04:47 PM

#3
Bertan

Posted 20 October 2011 - 08:06 AM

#4
RhetoricalRuvim

Posted 21 October 2011 - 01:02 PM