Mostrar y Ocultar Div con jаvascript y CSS3

1 - CSS

*{
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

var clic = 1;
function divLogin(){ 
   if(clic==1){
   document.getElementById("caja").style.height = "100px";
   clic = clic + 1;
   } else{
       document.getElementById("caja").style.height = "0px";      
    clic = 1;
   }   
}

3 - Html

<!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="divLogin()">
Mostrar/Ocultar
</div>
<figure>
<a href="https://tutorialesenlinea.es/">
<img src="/templates/TutorialesEnLinea_es/placeholders/logo.webp" />
</a>
</figure>
<div id="caja">
</div>
<br/>
<figure>
<a href="https://tutorialesenlinea.es/"><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

Mostrar y Ocultar Texto con jаvascript sin CSS

Jаvascript

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

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

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.

Ver Resultado

Otra Opcion:

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

Ver Resultado

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

Ver Resultado

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

Ver Resultado

Varios Enlaces

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

Ver Resultado

<!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>

Ver Resultado