Para hacer un sitio web o un blog más dinámica es necesario darle control al usuario. Control como el hecho de decidir que quiere elementos quiere ver y cuales no y se lo podemos otorgar gracias jQuery y un sencillo script gracias a Web desginer wall.

desaparecer-elementos

El script y la librería te permitirán hacer desaparecer cualquier elemento de la página al cliquear en un botón. Por ejemplo, podemos colocar una nota en la barra lateral de la página con un aviso y colocar un botón para que desaparezca si le estorba al lector. (Ver demo)

  1. Como siempre, lo primero es descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>.
    <script type="text/javascript" src="jquery.js"></script>
  2. Enseguida después del llamado, agregamos la función que usa la librería y le dice que al cliquear el elemento con clase “eliminar” (en este caso el botón) desaparezca el elemento con clase “contenedor” (en este caso el div del mensaje).
    <script type="text/javascript">
$(document).ready(function(){
						   
	$(".contenedor .eliminar").click(function(){
		$(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow");
	});

});
</script>
  3. Ahora solo hay que usar las clases del script en la estructura html.
    <div class="contenedor">
	<h2>Lorem ipsum 1</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
	<p><a href="">Regresar al tutorial</a></p>
	<img src="eliminar.png" alt="cerrar" class="eliminar" />
</div>
  4. Y darle estilo a cada clase, es decir, al contenedor y al botón con los respectivos atributos generales.
    .contenedor {
	margin:20px auto;
	background:#F5E38E;
	border:2px solid #EBCA4F;
	padding:10px;
	width:500px;
	position:relative;
}
.contenedor .eliminar {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
h2 { color:#ff0000; font-size:15px; }
p { font-size:11px; padding: 0 0 11px; color:#333; }
a { color:#ff8400; }
body { font-family:verdana, arial; }

Las posibilidades son muchas y de hecho este es en esencia el mismo funcionamiento que tienen los menús de pestañas (tabs).

Demo | Descargar el ejemplo