La respuesta que te ha dado PabloNeirotti es muy acertada, ya que emplea nuevas tecnologias como lo es CSS3, claro con el problema de los navegadores.
La solución que creo adecuada sería utilizar jquery IU (No sé si lo has utilizado) igual es muy fácil, como lo siguiente:
Código HTML:
<!--Lo primero que debes hacer es insertar las librerías necesarias-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Ahora le daremos el efecto drop a tu contenido, sea una imagen, texto, video, etc...
Código HTML:
<style type="text/css">
#noUno
{ margin: 0px;
width: 100px;
height: 80px;
background: green;
border: 1px solid black;
position:absolute;
}
#noDos
{ margin: 0px;
width: 100px;
height: 80px;
background: green;
border: 1px solid black;
position:absolute;
display:none
}
</style>
<script>
$(document).ready(function() {
$("#noUno").click(function () {
$(this).hide("drop", { direction: "left" }, 1000);
});
$("#noUno").click(function () {
$("#noDos").show("drop", { direction: "rigth" }, 2000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="noUno"></div>
<div id="noDos"></div>
</body> Como vemos el evento click esta sobre el mismo objeto el cual oculta el primer elemento y muestra el segundo con un efecto de jquery "drop", en tu caso el elemento que debe realizar la acción de ocultar y mostrar me imagino que debe ser un botón.