Javascript – Mostrar / Ocultar texto de párrafo en el interior Div de clic de botón.

En este fragmento de código vamos a aprender cómo para mostrar / ocultar el texto de párrafo dentro de un div con el botón clic?

En este ejemplo también se puede utilizar para texto de la diapositiva en el botón de clic, en este ejemplo utilizaremos dos párrafos de texto dentro de un div y mostraremos / ocultar el botón de clic.

Javascript – Mostrar / Ocultar texto de párrafo en el interior Div de clic de botón

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>

Código fuente HTML con 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>

Resultado

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

clic for DEMO y rarr;


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *