4z3o1d
Mostrar y Ocultar Div con jаvascript y CSS3 6u2d10
1 - CSS h1f6v
*{
margin: 0;
padding: 0;
}
figure{
width: 180px;
display: inline-block;
margin-top: 10px;
float: right;
}
figure img{
width: 180px;
}
#contenedor{
width: 50%;
margin: auto;
}
#caja{
width: 100%;
margin: auto;
height: 0px;
background: #000;
box-shadow: 10px 10px 3px #D8D8D8;
transition: height .4s;
}
#caja2{
width: 100%;
margin: auto;
height: 0px;
background: #000;
box-shadow: 10px 10px 3px #D8D8D8;
transition: height .4s;
}
#boton2:hover + div#caja2{
height: 100px;
}
#boton2{
padding: 10px;
background: orange;
width: 95px;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 0px 0px 1px #000;
display: inline-block;
}
#boton{
padding: 10px;
background: orange;
width: 95px;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 0px 0px 1px #000;
display: inline-block;
}
#boton:hover{
opacity: .8;
}2 - jаvascript 1z6j1u
var clic = 1;
function div(){
if(clic==1){
document.getElementById("caja").style.height = "100px";
clic = clic + 1;
} else{
document.getElementById("caja").style.height = "0px";
clic = 1;
}
}3 - Html 2n1753
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mostrar y Ocultar Div</title>
</head>
<body>
<div id="contenedor">
<div id="boton" onclick="div()">
Mostrar/Ocultar
</div>
<figure>
<a href="https://tutorialesenlinea.futbolgratis.org/">
<img src="/templates/TutorialesEnLinea_es/placeholders/logo.webp" />
</a>
</figure>
<div id="caja">
</div>
<br/>
<figure>
<a href="https://tutorialesenlinea.futbolgratis.org/"><img src="/templates/TutorialesEnLinea_es/placeholders/logo.webp" /></a>
</figure>
<div id="boton2">Mostrar/Ocultar</div>
<div id="caja2">
</div>
</div>
</body>
</html>Ver Resultado 3s1ss
Mostrar y Ocultar Texto con jаvascript sin CSS 704h63
Jаvascript 4vtt
A mi personalmente me gusta meter todos las funciones jаvascript que uso en un archivo a aparte, por ejemplo lib.js, y enlazarle, en el archivo html correspondiente:
<script src="lib.js" type="text/jаvascript"></script>De esta manera creo que carga antes y sobre todo tengo todo el jаvascript junto.
Concretamente la función display es la encargada de jugar con la ocultación o no, para ello mira la característica display de la capa en concreto y pone la contraria.
La función sería:
function Ocultar(ejemplo)
{
vista=document.getElementById(ejemplo).style.display;
if (vista=='none')
vista='block';
else
vista='none';
document.getElementById(ejemplo).style.display = vista;
}El texto 2m3i63
Cuando escribos el texto que después ocultaremos lo englobaremos dentro de una capa, en el campo de id le pondremos un nombre único, ejemplo en este caso y en display indicamos que none para que por defecto este oculto.
<div id="ejemplo" style="display: none;">Texto Oculto... </div> El enlace 5b4b
El enlace sería:
<a href="#" onclick="Ocultar('ejemplo'); return false;">Leer Más</a> Como se ve, se hace uso de la función onclick que llama a nuestra función cuyo argumento es el identificador de la capa.
3a654z
Otra Opcion: 2h6162
<body>
<input type="button" value="Ver"
onclick="document.getElementById('oculto').style.visibility='visible'">
<input type="button" value="ocultar" onclick="document.getElementById('oculto').style.visibility ='hidden'">
<br>Este texto se ve siempre
<div id="oculto" style="visibility:hidden">
Este texto se verá cuando yo quiera
</div>
</body> <span id="oculto" style="width:500;"></span>
<a href="jаvascript:document.getElementById('oculto') .innerText='Y la luz se hizo';">¡Hágase la luz!</a><html>
<head>
<script>
function mostrar(enla) {
obj = document.getElementById('oculto');
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';
}
</script>
</head>
<body>
<a href="#" onclick="mostrar(this); return false" />+</a>
<div id="oculto" style="visibility:hidden">
Este texto se verá cuando yo quiera
</div>
</body>
</html> Varios Enlaces 4l2356
<html>
<head>
<script>
function mostrar(enla , etik) {
obj = document.getElementById(etik);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == '[-]') ? '[+]' : '[-]';
}
</script>
</head>
<body>
<p><a href="#" onclick="mostrar(this,'oculto'); return false" />[+]</a></p>
<div id="oculto" style="display:none">
Este texto se verá cuando yo quiera
</div>
<div>esto es un texto intermedio, siempre esta visible</div>
<p><a href="#" onclick="mostrar(this,'oculto2'); return false" />[+]</a></p>
<div id="oculto2" style="display:none">
Este texto se verá cuando yo quiera
</div>
<div>esto es otro texto intermedio, siempre esta visible</div>
</body>
</html> <!doctype html>
<html>
<head>
<script type="text/jаvascript">
function mostrar(enla,etik) {
obj = document.getElementById(etik);
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>
<body>
..............................
<a href="#" onmouseover="mostrar(this,'capa'); return false" onmouseout="mostrar(this,'capa'); return false">enlace</a>
<div id="capa" style="visibility:hidden">
Este texto se verá cuando ponga el cursor sobre el enlace
</div>
</body>
</body>
</html>