Home » JavaScript

JavaScript - Show/Hide Paragraph Text inside Div on Button Click.

In this code snippet we will learn how to show/hide paragraph text inside a div using button click?

This example can also be used to slide text on button click, in this example we will use two paragraph text inside a div and will show/hide on button click.

JavaScript - Show/Hide Paragraph Text inside Div on Button Click

JavaScript

<script type="text/javascript">
	function hideDef(){
		document.getElementById('p01').style.display = "block";
		document.getElementById('p02').style.display = "none";
	}
	function nextCall(){
		if(document.getElementById('p01').style.display=='block'){
			document.getElementById('p01').style.display = "none";
			document.getElementById('p02').style.display = "block";
		}
		else if(document.getElementById('p02').style.display=='block'){
			document.getElementById('p01').style.display = "block";
			document.getElementById('p02').style.display = "none";
		}
	}
</script>

HTML Source Code with jQuery/JavaScript

<!--JavaScript - Show/Hide Paragraph Text inside Div on Button Click.-->
<html>
	<head>
		<title>JavaScript - Show/Hide Paragraph Text inside Div on Button Click.</title>
		<style type="text/css">
		.divContainer
		{
			width: 300px;
			background-color: #efefcc;
		}
		</style>
		<script type="text/javascript">
			function hideDef(){
				document.getElementById('p01').style.display = "block";
				document.getElementById('p02').style.display = "none";
			}
			function nextCall(){
				if(document.getElementById('p01').style.display=='block'){
					document.getElementById('p01').style.display = "none";
					document.getElementById('p02').style.display = "block";
				}
				else if(document.getElementById('p02').style.display=='block'){
					document.getElementById('p01').style.display = "block";
					document.getElementById('p02').style.display = "none";
				}
			}
		</script>
		</div>
		<!--Example CSS-->
		<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>		
	</head>
	<body  onload="hideDef()">
	<big>
		<h1>JavaScript - Show/Hide Paragraph Text inside Div on Button Click.</h1>
		<div class="divContainer">
			<p id="p01">This is the first paragraph.</p>
			<p id="p02">This is the second paragraph.</p>
			<input type="button" id="next" value="&rarr;" onclick="nextCall()"/>
		</div
	</big>
	
	</body>
</html>

Result

show hide text inside div

Click for DEMO →






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.