Pestañas de producto como acordeón CSS en Classic

hectormadrid57

¡Hola a todos!

Estoy intentando modernizar la sección de descripción y especificaciones de los productos en mi tienda PrestaShop. Las pestañas clásicas de Bootstrap se ven un poco anticuadas y quiero convertirlas en un diseño de acordeón más limpio, con paneles plegables y un icono de chevron. He estado trasteando con el custom.css del tema Classic, pero me encuentro con varios problemas.

Mi mayor dolor de cabeza es que, al intentar aplicar estilos para ocultar el contenido de las pestañas inactivas y luego mostrar solo el activo, el borde del panel activo 'salta' un poco y la transición no es fluida en absoluto, especialmente en móvil cuando se intenta emular un colapso. Aquí un fragmento de lo que he probado:

.product-information .nav-tabs {
    border-bottom: none;
    display: block;
}
.product-information .nav-item {
    margin-bottom: 5px;
}
.product-information .nav-link {
    display: block;
    padding: 15px;

Con esto, las pestañas pierden su funcionalidad visual de acordeón y el contenido se muestra de forma brusca. ¿Alguna idea de cómo puedo conseguir un acordeón más elegante y funcional solo con CSS en custom.css?

elenadeco99

¡Hola @hectormadrid57!

Entiendo perfectamente lo que buscas. Convertir las pestañas de Bootstrap en un acordeón puramente con CSS es un reto porque el comportamiento de colapsado (especialmente las animaciones de altura) generalmente se maneja con JavaScript para un efecto suave. El display: none y display: block es muy abrupto.

El problema del 'salto de borde' que mencionas en tu .nav-link.active podría ser por cómo border-bottom-color: #fff; interactúa con el border: 1px solid #ddd; del .tab-pane siguiente. Al desaparecer el borde inferior de la pestaña activa, el contenido de abajo sube un píxel, y cuando otro tab-pane se activa, su borde superior aparece, creando ese efecto de salto.

Una pregunta rápida, ¿en qué versión de PrestaShop estás? Y, ¿estás usando el tema Classic sin modificaciones en los archivos .tpl o solo estás tocando el CSS?

Milo

Hola @hectormadrid57 y @elenadeco99,

@elenadeco99 tiene razón, lograr un acordeón con animaciones de altura fluidas solo con CSS a partir de la estructura de pestañas de Bootstrap es complicado, ya que estas últimas están diseñadas para display: block o display: none y no para height: 0 a height: auto con transiciones. Sin embargo, podemos simular el aspecto y una transición de visibilidad más controlada para que parezca un acordeón y resolver el problema del 'salto'.

Para PrestaShop 1.7.6.0 con el tema Classic, podemos mejorar tu CSS en themes/classic/assets/css/custom.css de la siguiente manera. La clave está en cómo manejamos los bordes y el icono de chevron para dar la sensación de un acordeón.

.product-information .nav-tabs {
    border-bottom: none;
    display: block; /* Asegura que la lista sea un bloque */
}
.product-information .nav-item {
    margin-bottom: 0; /* Elimina el margen inferior entre elementos de nav */
}
.product-information .nav-link {
    display: flex; /* Para alinear el texto y el chevron */
    justify-content: space-between;

Explicación de los cambios:

margin-bottom: -1px; en .nav-link: Esto es clave para que los bordes de los elementos de navegación se superpongan ligeramente y eliminen el efecto de 'doble borde' o 'salto' entre los encabezados del acordeón.
border-bottom-color: transparent; en .nav-link.active: Hace que el borde inferior del encabezado activo sea transparente, permitiendo que el contenido de la pestaña se una visualmente sin un doble borde.
border-radius: 4px 4px 0 0; y border-radius: 0 0 4px 4px;: Da un aspecto más cohesionado al encabezado activo y al panel de contenido.
display: flex, justify-content: space-between, align-items: center para .nav-link: Permite posicionar el texto y el chevron de forma elegante.
::after para el chevron: Usamos un pseudo-elemento con un icono de Font Awesome para el chevron. Asegúrate de que Font Awesome esté cargado en tu tema.
transform: rotate(180deg); en .nav-link.active::after: Gira el chevron cuando la pestaña está activa, dando una indicación visual clara.
transition: opacity 0.3s ease; para .tab-pane: En lugar de una animación de altura (que requeriría JS), usamos una transición de opacidad para una aparición más suave del contenido cuando display: block se aplica. Esto reduce la brusquedad del cambio.

Esto debería darte un aspecto de acordeón bastante bueno y resolver el problema del salto de borde. ¡Prueba esto y me comentas!

hectormadrid57

¡Increíble, @Milo! ¡Muchísimas gracias por la explicación tan detallada y el código!

Estaba usando PrestaShop 1.7.6.0, como preguntaba @elenadeco99. La solución que has dado con el margin-bottom: -1px; y el border-bottom-color: transparent; es justo lo que necesitaba para el problema del borde que saltaba. Y la transición de opacidad junto con el chevron que rota le da un toque mucho más profesional y moderno sin tener que meterme con JavaScript.

Lo he aplicado en mi custom.css y funciona a la perfección. Ahora las pestañas de producto tienen un aspecto de acordeón muy elegante. ¡De verdad, un millón de gracias por tu ayuda!