Profile card accordion jQuery

Profile card accordion jQuery / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Profile card accordion jQuery

Es habitual que necesitemos mostrar mucha información en un espacio reducido, (texto, imágenes, gráficos, videos, etc.), pero nos vemos en la obligación de no distorsionar el diseño original.



La mejor solución, es usar “accordion jquery”, El contenido se muestra en bloques que se despliegan verticalmente.

Primero definimos el HTML:

La etiqueta imagen será con “click function()” que nos permitirá desplegar la información. A la cual le añadiremos la clase “.headerCard”. El div con la clase “infoCard”, lo pondremos oculto con “display:none”, para que cada vez que hacemos click en "headerCard” se muestre con el efecto “slideToggle”.

	.infoCard {
	    margin: 0 auto;
	    max-width: 500px;
	    color: #FF8A1E;
	    display: none;
	}

Una vez desplegado, podremos mostrar u ocultar los diferentes datos que aparecen. En este caso Los títulos son un h3, al que le añadimos de nuevo “click function()”, los divs con la clase “accordion”, son ocultados con CSS, y mostrados con “slideTogle” con jQuery.

Este código que nos permite, desplegar la información y los datos que se ocultan en el, de este modo, al hacer click en un h3, solo se desplegara la información asociada a él, gracias al elemento “this” y el resto permanecerán ocultas.

	$(function () {
	    "use strict";
	    $(".accordion:first").css("display", "block");
	    $("h3").click(function () {
	        $(this).next().slideToggle("500");
	        $(".accordion").not($(this).next()).slideUp("500");
	    });
	});

	$(".headerCard img").click(function () {
	    $(".infoCard").slideToggle("500");
	});

Puedes verlo en detalle y decargar el código, en mi perfil de codepen

También puedes ver una composición de varios perfiles en este template creado por mí

Mariano J.

Escribe un comentario

Tu email no se hará visible