Se puede hacer con css, pero es bastante complejo de usar... Pero con JavaScript es bastante más sencillo:
te pongo un ejemplo sencillo de una caja que se despliega al hacer clic en una pestañita.
Código:
<html>
<head>
<script type="text/javascript">
function capa()
{
var estilo = document.getElementById("capa").className; <!-- Aqui (donde pone capa) pones el nombre de la clase que le des a la caja que quieres que se despliegue -->
if (estilo == "hidden")
{
document.getElementById("capa").className = "show"; <!-- Lo mismo aquí (donde pone capa) y donde pones "show" seria el estilo de la caja desplegada -->
}
else
{
document.getElementById("capa").className = "hidden"; <!-- Lo mismo aquí (donde pone capa) y donde pones "hidden" seria el estilo de la caja escondida -->
}
}
</script>
<style type="text/css">
.imput {width: 245px; height: 20px; background-color:#CFF; border: 1px solid;}
.hidden {display: none;}
.show {border:1px solid; width:243px;}
</style>
</head>
<body>
<input type="button" value="CLICK PARA DESPLEGAR" class="imput" onClick="capa()" /> <!-- Lo mismo aqui en el "onClick" -->
<div id="capa" class="hidden"> <!-- Aquí en el "id" pones "capa" o lo que hubieras declarado arriba en el script, y en la clase pues la que tengas para la caja sin desplegar -->
<img src="http://www.anieto2k.com/wp-content/uploads/2008/04/homer_css-243x300.jpg" />
</div>
</body>
</html>