Los acordeones CSS se utilizan ampliamente para menús, fragmentos, imágenes, videos, preguntas frecuentes, listas y extractos de artículos que se pueden expandir y contraer. Puede crearlos fácilmente usando HTML, CSS y JavaScript (o jQuery). Crear acordeones solo con CSS es una tarea un poco desafiante, pero es muy útil en entornos con JavaScript deshabilitado.

En esta guía, aprenderá un enfoque paso a paso para crear un acordeón solo CSS.

Construyendo acordeón básico usando solo HTML

Si su prioridad es crear un acordeón accesible usando HTML, el y las etiquetas son el camino a seguir. No importa qué lenguaje de programación estés usando, el acordeón solo HTML permanecerá intacto. Crear un etiqueta como padre e ingresa la pregunta en un etiqueta. Escribe una respuesta descriptiva dentro de un etiqueta. Repita el proceso para cualquier número de preguntas frecuentes.

Preguntas frecuentes 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!





instagram viewer







Preguntas frecuentes 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. 






Preguntas frecuentes 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi en eligendi hic reprehenderit repellendus quos!

Diseñando el acordeón

Puede diseñar el acordeón ajustando el color de fondo, radio de borde, margen, rellenoetc.

cuerpo {
 familia de fuentes: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Ginebra, Verdana, sans-serif;
 ancho máximo: 30rem;
 margen: 1.5rem automático;
}
resumen {
 peso de fuente: 600;
 color: rgb (255, 255, 255);
 color de fondo: rgb (7, 185, 255);
 acolchado: 1.2rem;
 margen inferior: 1.2rem;
 radio de borde: 0.5rem;
 cursor: puntero;
}

Producción:

La única limitación es que no tendrá control sobre todas y cada una de las partes del código. La estructura HTML se puede modificar, pero no se puede crear un acordeón personalizado. Por lo tanto, creemos una sección de preguntas frecuentes personalizada utilizando CSS avanzado.

Cree su sección personalizada de preguntas frecuentes

Hay dos métodos populares para crear un acordeón personalizado solo con CSS. Puede utilizar casillas de verificación o botones de opción; explicaremos ambos métodos.

Usando el método de casilla de verificación

El método de casilla de verificación utiliza caja como tipo de entrada. Siempre que un usuario selecciona una pestaña, marca la casilla de verificación y se abre. Puede abrir varias pestañas simultáneamente utilizando el método de casilla de verificación, similar a cómo puede marcar más de una casilla de verificación dentro de un Formulario HTML.

HTML

Acordeón personalizado solo con CSS (preguntas frecuentes)

Usando el método Checkbox






¿Cómo construir un acordeón personalizado usando solo CSS?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 assumenda a, nesciunt eum nobis eaque, exercitationem distintivo alias ullam quia. Corrupti beatae
 needitatibus nihil.









¿Cómo cambiar la altura de los pseudoelementos?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus excepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Eveniet.

CSS general

Aplica el CSS básico al cuerpo.

cuerpo {
 color: # 502c2c;
 fondo: # f1edec;
 acolchado: 1.2rem;
 familia de fuentes: 'Segoe UI', Tahoma, Ginebra, Verdana, sans-serif;
 ancho máximo: 45rem;
 margen: 0 automático;
 tamaño de fuente: 1.2rem;
}

Diseñando el acordeón

Primero, oculte las casillas de verificación modificando la entrada.

/ * Ocultar las casillas de verificación o el botón de opción * /
aporte {
 posición: absoluta;
 opacidad: 0;
 índice z: -1;
}

Ahora, estiliza el acordeón. Puede agregar un::después pseudo-elemento para el + firmar. Puede referirse a un Cuadro de referencia de entidad de carácter y usa cualquier Calculadora de conversión de entidades para encontrar el valor CSS de un valor numérico. Aquí, el valor CSS de + es \ 002B.

/ * Estilos de acordeón * /
.Preguntas más frecuentes {
 color: # ffe3e3;
 margen inferior: 3rem;
}
.faq-label {
 tamaño de fuente: 1.5rem;
 pantalla: flex;
 alinear-elementos: centro;
 justificar-contenido: espacio-entre;
 acolchado: 1em;
 fondo: # b61818;
 font-weight: negrita;
 cursor: puntero;
 selección de usuario: ninguno;
}
.faq-label:: after {
 contenido: '\ 002B';
 acolchado: 0.51rem;
 transformar: escala (1.8);
 alineación de texto: centro;
 transición: todos los 0,35 s;
}
.faq-content {
 altura máxima: 0;
 acolchado: 0 1em;
 color: # 2c3e50;
 fondo: blanco;
 transición: todos los 0,35 s;
 pantalla: ninguna;
}

Ahora, agreguemos funcionalidad al acordeón usando selectores de atributos y adyacentes. Aquí, \2013 es el valor CSS para –, el valor numérico que representa –.

entrada: comprobado + .faq-label {
 fondo: # 8f1414;
}
input: comprobado + .faq-label:: after {
 contenido: '\ 2013';
 transformar: escala (1,5);
}
entrada: comprobado ~ .faq-content {
 altura máxima: 100vh;
 acolchado: 1em;
 bloqueo de pantalla;
 transición: todos los 0,35 s;
}

Producción:

Uso del método del botón de opción

El método del botón de radio tiene un tipo de entrada establecido en radio. Siempre que el usuario hace clic en una pestaña, se abre el botón de opción oculto correspondiente a esa pestaña. Cuando haces clic en la siguiente pestaña, la pestaña anterior se cierra instantáneamente. Solo puede abrir una pestaña a la vez utilizando el método del botón de opción.

HTML

Acordeón personalizado solo con CSS (preguntas frecuentes)

Uso del método del botón de opción






¿Cómo crear un acordeón usando el método del botón de radio?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









¿Cómo crear un acordeón personalizado usando solo CSS?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









¿Qué significa estilo acordeón?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? ¡Vel, no!









Cerrar todo ×

CSS

Copie el CSS anterior del Método de casilla de verificación, ya que ambos métodos difieren únicamente del punto de vista estructural. Puede notar que hay una pestaña abierta todo el tiempo. Esto sucede porque no puede desmarcar botones de opción como casillas de verificación. Para lograr esto, agregue el siguiente código CSS a un botón de opción "Cerrar todo" sin ninguna descripción.

/ * Cerrando todo * /
.faq-label {
 posición: relativa;
}
.faq-close {
 pantalla: bloque en línea;
 acolchado: 1rem;
 tamaño de fuente: 1rem;
 fondo: # b61818;
 cursor: puntero;
 posición: absoluta;
 izquierda: 64rem;
}

Producción:

Siga experimentando y agregue animaciones

Hay una lógica simple detrás de los acordeones: cuando haces clic en un menú, aparecerá su contenido oculto. Dado que ahora sabe cómo crear un acordeón, es hora de implementar y experimentar con su aprendizaje. Puede construir acordeones horizontales para mejorar el diseño, especialmente al mostrar imágenes. Experimente con el código ajustando el efecto de transición utilizando animaciones de fotogramas clave.

Naincy Mourya (16 Artículos publicados)

Naincy se especializa en la creación de sitios web altamente receptivos y una estrategia de contenido eficiente junto con copias web. Ella es una escritora de tecnología independiente que está muy atenta a las tecnologías de tendencia.

Más de Naincy Mourya