Deprecated: Return type of Requests_Cookie_Jar::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 63 Deprecated: Return type of Requests_Cookie_Jar::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 73 Deprecated: Return type of Requests_Cookie_Jar::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 89 Deprecated: Return type of Requests_Cookie_Jar::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 102 Deprecated: Return type of Requests_Cookie_Jar::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 111 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 40 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 51 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 68 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 82 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 91 Ideas Fugaces - » Acordeon con JQuery y CSS

Acordeon con JQuery y CSS

Escrito por Germanet el 21 de julio de 2010 | 2:34 pm

Este es uno de los widgets que más se están usando por su funcionalidad y sencillez. El códio lo he visto en la página de SohTanaka, y me gustó mucho la forma en que presenta el tutorial, así que he decidido seguir sus consejos e intentar analizar el código para ver cómo funciona, además de aportar algo más en el diseño.

Ej. 1: Acordeon con JQuery y CSS

JQuery + CSS
AcordeonMétodo: .toggle()

Diseño y Mantenimiento Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh.

MAQUETACIÓN

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Distintos lengüajes de diseño

HTML, CSS, JavaScript

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor.

Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Proyectos

Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.

Desarrollo y Mantenimiento

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Páginas Comerciales

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.

Asesoramiento

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

HTML

Consiste en varios pares de bloques compuestos de Título y Contenido.

<div class="acordeon">
    <!--Pares de Título y Contenido -->
    <!--Par-1 -->
    <h2 class="accion"><a href="#">Título</a></h2>
    <div class="acordion_cont">
        <div class="bloque">
        	<!--Texto e Imágenes -->
        </div>
    </div>
</div>
CSS

Lo más importante es el fondo y el padding de la etiqueta h2. Aquí se ha utilizado una misma imagen para los dos estados, activo y reposo, variando la posición de la imagen de top para el esado en reposo y bottom para el estado activo.

La clase «acordion_cont» asignada al div que le sigue al título, será luego utilizada para localizar el elemento que debe mostrarse y ocultarse. Contine a su vez un div al que se le ha aplicado la clase «bloque» con un padding de 20px.

JQuery
/* Acordeon */
$(document).ready(function(){
	$(".acordion_cont").hide();
	$('.accion:first').addClass('active').next().slideToggle("slow");
	$('.accion').click(function(){
	if( $(this).next().is(':hidden') ) {
		$('.accion').removeClass('active').next().slideUp();
		$(this).toggleClass('active').next().slideDown();
	}
	return false;
	});
});

Cuando se carga el documento:

    1. Se oculta todo el contenido con la clase que se ha pasado como localizador, en este caso: .acordion_cont
    2. La pseudoclase :first permite determinar el primero de los elementos al que se le ha aplicado la clase ‘accion’, para activarlo. Luego se localiza de manera similar el siguiente elementto del mismo tipo (div) y se le aplica el método .slideToggle(), que consiste en colapsar alternativamente su altura.

Cuando hacemos click:

    1. Se le aplica el método .toggleClass() al elemento pulsado. Este método permite agregar o quitar la clase ‘active’ que es la que se le ha pasado como parámetro. Acto seguido se determina el siguiente elemento y se muestra mediante .slideDown().
    2. Una línea más se ha agregado como condicional, para completar la funcionalidad del widget y que no se nos queden abiertas las ventanas según las usamos. Para ello se usa el condicional «if» que determina en primer lugar si presionamos el título de una ventana que esté cerrada, de otra manera no ocurrirá nada. Si la ventana está cerrada, quitará todos los elementos que tengan la clase ‘active’ y cerrará el contenedor abierto. Finalmente otorga la clase ‘active’ al elemento pulsado y abre el contenedor que le corresponde, y que es el siguiente.

Los comentarios están cerrados.