Como Ocultar Texto Con Javascript y CSS3 w5t6k

<!doctype html>
<html>
<head>
<script type="text/javascript">
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;
   }   
}
</script>
<meta charset="utf-8">
<title>Mostrar y Ocultar Div</title>
</head>
<style>
*{
	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;
}
</style>
<body>
<div id="contenedor">
		<div id="boton" onclick="div()">
			Mostrar/Ocultar
		</div>
		<figure>
			<a href="http://tutorialesenlinea.descargarjuegos.org/">
				<img src="https://tutorialesenlinea.descargarjuegos.org/templates/tutorialesenlinea/imagenes/logoTL.png" />
			</a>
		</figure>	
		<div id="caja">
		</div>
		<br/>
		<figure>
			<a href="http://tutorialesenlinea.descargarjuegos.org/"><img src="https://tutorialesenlinea.descargarjuegos.org/templates/tutorialesenlinea/imagenes/logoTL.png" /></a>
		</figure>
		<div id="boton2">Mostrar/Ocultar</div>	
		<div id="caja2">
		</div>
	</div>	
</body>
</html>