Saltar al contenido
Entradas

Ocultar o mostrar con efecto colapsado / deslizando en Jquery

22 julio, 2011

Este recurso es muy útil, muchas veces encontramos que tenemos un texto muy largo en una página y quizás con un trozo nos fuera suficiente, pero no queremos crear una página para ampliar la información, sino que preferimos que se pueda ampliar la información en la misma página mostrándose y ocultándose cuando un usuario lo desee, pues para este caso es para cuando nos sirve este recurso, es muy sencillo y con copiar el código que os voy a proporcionar y modificar algún estilo para modificar el ancho y los colores sería suficiente.

Para poder usar este recurso necesitamos la librería Jquery, que podemos descargar desde su página principal http://jquery.com/ .

Esta clase javascript contiene el código necesario para dar la funcionalidad a nuestro ejemplo, solo necesitaríamos crear el contenido y llamar a las funciones necesarias incluidas en este archivo para dar la funcionalidad.
Primero tendremos que maquetar el contenido con el html necesario, es este caso creamos un contenedor y un enlace para proporcionar la funcionalidad.

1
2
3
4
5
6
7
8

<body>
<a href="#" id="mostrarfiltro">MOSTRAR</a>
<br /><br/>
<div id="masfiltros">
<a href="#" class="close">[x]</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</body>

Después tendremos que dar los estilos necesarios al contenedor creado para ajustar su ancho y sus colores o tipos de letra, en el ejemplo incluyo los estilos en la misma página, en el head , pero lo correcto sería crear una hoja de estilos externa e incluirla en el HTML como archivo .css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;	
}
#masfiltros{
	display:none;
	width:300px;
	background:#CCCCCC;
	padding:2px;
	border:1px solid #000;
}
.close{
	float:right;
}
a{color:#993300; text-decoration:none;}
 
</style>

Por último solo nos faltaría incluir el archivo o clase jquery y las funciones necesarias en el head de la pagina con la ruta donde este, en este caso está al mismo nivel que el HTML por lo que será

1

<script type="text/javascript" src="jquery.js"></script>

Una vez incluido el archivo de la librería nos faltarían las funciones javascript que realicen la funcionalidad deseada, en este caso que desplieguen el contenedor con un efecto que parezca que se desliza al abrirse o cerrarse, en el ejemplo los he incluido en el head del HTML, pero lo correcto sería sacarlos como el css a un js externo y llamar al archivo en el HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
$(function()
{
 
$("#mostrarfiltro").click(function(event) { //asignamos el evento  de abrirse "slideToggle()" a el enlace mostrarfiltro
	event.preventDefault();
$("#masfiltros").slideToggle(); //evento que muestra el contenedor masfiltros
});
 
$("#masfiltros a").click(function(event) { //asignamos el evento de cerrar al enlace contenido en mas filtros
event.preventDefault();
$("#masfiltros").slideUp(); //evento que oculta el contenedor masfiltros
});
});
</script>

Después de esto ya tendríamos nuestro ejemplo, podemos verlo pinchando aquí.