El Editor de bloques de Waclis incluye componentes interactivos que permiten organizar grandes cantidades de contenido sin mostrar toda la información al mismo tiempo.

Dentro de:

Componentes → Elementos

encontrarás:

• Tabs

• Accordeon

Ambos permiten dividir información en grupos, pero funcionan de manera diferente.

En este tutorial aprenderás:

• qué diferencia existe entre Tabs y Accordeon;

• cuándo utilizar cada componente;

• cómo organizar correctamente el contenido;

• cómo identificar su estructura mediante Navigator;

• cómo editar títulos y paneles;

• qué precauciones tomar al clonar elementos;

• por qué los IDs internos pueden ser importantes;

• cómo evitar controles que abren el contenido incorrecto;

• cómo adaptar Tabs a celular;

• cómo mantener Accordeon legible;

• qué diferencias existen entre Accordeon y Preguntas frecuentes;

• qué ocurre al eliminar solamente una parte de un componente interactivo;

• cuándo utilizar HTML o CSS;

• qué evitar al modificar un componente que ya funciona.

Tabs y Accordeon: ¿qué diferencia existe?

La diferencia principal está en la forma de acceder al contenido.

Tabs

Tabs organiza la información mediante pestañas.

Conceptualmente:

[ DESCRIPCIÓN ][ CARACTERÍSTICAS ][ ENVÍOS ]

Contenido correspondiente a la pestaña seleccionada.

El visitante selecciona una pestaña y visualiza el contenido relacionado.

Accordeon

Accordeon organiza la información mediante elementos que pueden abrirse y cerrarse.

Conceptualmente:

¿Cómo funciona?                    +

¿Qué incluye?                     +

¿Cuáles son los requisitos?       +

Al seleccionar uno:

¿Cómo funciona?                    −

Aquí aparece la explicación correspondiente.

¿Qué incluye?                     +

¿Cuáles son los requisitos?       +

Regla rápida

TABS
→ categorías o vistas paralelas

ACCORDEON
→ bloques de información desplegables

Ejemplo de Tabs

Una ficha informativa podría presentar:

[ DESCRIPCIÓN ]
[ ESPECIFICACIONES ]
[ DESCARGAS ]

Cada pestaña representa un tipo diferente de información.

Ejemplo de Accordeon

Una página de Servicio podría utilizar:

¿Qué incluye el servicio?        +

¿Cómo es el proceso?             +

¿Qué necesitamos para comenzar?  +

Ambos ahorran espacio, pero no deberían utilizarse solamente por eso

El objetivo principal debe ser:

organizar información relacionada de una forma más fácil de consultar.

Tabs vs Accordeon: comparación rápida

¿Cuándo utilizar Tabs?

Tabs puede resultar apropiado cuando tienes varias categorías relacionadas que el visitante puede consultar alternativamente.

Por ejemplo:

[ INFORMACIÓN ]
[ CARACTERÍSTICAS ]
[ DOCUMENTACIÓN ]

Otros ejemplos

[ PRODUCTO ]
[ ESPECIFICACIONES ]
[ ENVÍO ]

[ EMPRESAS ]
[ PROFESIONALES ]
[ DISTRIBUIDORES ]

si realmente necesitas presentar contenido diferente para cada grupo.

También puede utilizarse para

• diferentes categorías de información;

• modalidades;

• grupos de especificaciones;

• contenidos relacionados;

• variantes editoriales.

¿Cuándo no utilizar Tabs?

No utilices Tabs simplemente para esconder contenido que debería estar visible.

Ejemplo

Si la información principal de una página es:

Qué hacemos

no deberías ocultarla detrás de una pestaña innecesaria:

[ INFORMACIÓN GENERAL ]

si puede mostrarse directamente.

El contenido principal debería seguir siendo fácil de encontrar

Tampoco utilices Tabs para una secuencia

Por ejemplo:

[ PASO 1 ]
[ PASO 2 ]
[ PASO 3 ]

si necesitas que el visitante comprenda el orden completo del proceso.

Para eso puede ser más apropiado:

Timeline

Tabs no comunica necesariamente orden

Las pestañas suelen representar alternativas o categorías equivalentes.

¿Cuándo utilizar Accordeon?

Accordeon puede ser especialmente útil para:

• preguntas y respuestas;

• explicaciones extensas;

• requisitos;

• condiciones;

• especificaciones agrupadas;

• información secundaria;

• detalles de servicios;

• contenido que el visitante consulta según necesidad.

Ejemplo

REQUISITOS

¿Qué necesito antes de comenzar?        +

¿Qué documentación debo tener?          +

¿Puedo realizar cambios posteriormente? +

Otro ejemplo

INFORMACIÓN DEL SERVICIO

Qué incluye                       +

Cómo trabajamos                   +

Tiempos estimados                 +

Información adicional             +

¿Cuándo no utilizar Accordeon?

No escondas detrás de un Accordeon información que todos los visitantes necesitan leer para comprender la página.

Por ejemplo

Si el contenido principal dice:

Somos una empresa dedicada a...

puede ser mejor mostrarlo directamente mediante Paragraph.

Accordeon es especialmente útil para información secundaria o consultable

Accordeon vs Preguntas frecuentes

Esta diferencia es importante.

Preguntas frecuentes define el tipo de contenido.

Accordeon define una forma de presentarlo.

Una FAQ puede utilizar Accordeon

Por ejemplo:

¿Realizan envíos?                 +

¿Puedo solicitar una cotización?  +

¿Cuáles son los medios de pago?   +

Pero Accordeon también puede utilizarse para otros contenidos

Por ejemplo:

CARACTERÍSTICAS TÉCNICAS          +

MATERIALES                        +

CUIDADOS                          +

Eso no es necesariamente FAQ.

Del mismo modo, una FAQ no está obligada a utilizar Accordeon

Podría mostrarse:

Pregunta

Respuesta

Pregunta

Respuesta

de forma completamente visible.

Tabs vs List Group

List Group presenta un conjunto de elementos.

Por ejemplo:

Documentación
Tutoriales
Soporte

Tabs presenta contenido asociado a cada opción

[ DOCUMENTACIÓN ][ TUTORIALES ][ SOPORTE ]

Contenido de la opción seleccionada.

Si cada elemento solamente debe llevar a otra página

puede ser mejor utilizar:

• List Group;

• Links;

• navegación.

No construyas Tabs solamente para simular un menú

Tabs vs navegación principal

Tabs organiza contenido dentro de una misma zona.

No debería sustituir:

• Header;

• Menú principal;

• navegación general de la Página web.

Si necesitas acceder a páginas distintas

utiliza Links o navegación apropiada.

¿Cómo agregar Tabs?

Abre:

Componentes → Elementos → Tabs

y agrega el componente dentro de la estructura correspondiente.

Después utiliza Navigator

Esto es especialmente importante porque un componente Tabs puede contener diferentes niveles.

Conceptualmente puede verse así:

Tabs
├── Tabs Navigation
│   ├── Tab Control 1
│   ├── Tab Control 2
│   └── Tab Control 3
└── Tabs Content
    ├── Panel 1
    ├── Panel 2
    └── Panel 3

La estructura exacta puede variar según el diseño utilizado.

Concepto fundamental

Cada control debe estar relacionado con su contenido.

Por ejemplo:

DESCRIPCIÓN
↓
Panel Descripción

CARACTERÍSTICAS
↓
Panel Características

ENVÍOS
↓
Panel Envíos

No son elementos independientes

Este es uno de los puntos más importantes.

Visualmente ves

[ DESCRIPCIÓN ]

pero internamente pueden existir datos que indican:

qué panel debe mostrarse cuando se selecciona esa pestaña.

Por eso no debes modificar indiscriminadamente

• IDs;

• Classes;

• atributos;

• referencias internas;

de un Tabs que ya funciona.

Un cambio de color no necesita modificar la estructura funcional

Para personalizar

• Background;

• Typography;

• Border;

• Padding;

utiliza Estilo siempre que sea posible.

¿Cómo editar el nombre de una pestaña?

Selecciona el texto o control correspondiente.

Por ejemplo:

Descripción

puede cambiar a:

Información

Después comprueba que siga abriendo el panel correcto

Modificar el texto visible normalmente no debería requerir cambiar el identificador interno

si solamente estás renombrando la pestaña.

No cambies IDs para que “coincidan visualmente” con el nuevo título

sin comprobar su función.

Ejemplo

El control puede mostrar:

Información técnica

pero utilizar internamente un identificador que no necesitas modificar.

El usuario no ve ese identificador

¿Cómo editar el contenido de una pestaña?

Puedes seleccionar el panel correspondiente mediante:

• lienzo;

• Navigator;

• Seleccionar padre;

según la estructura.

El panel puede contener

• Heading;

• Paragraph;

• Image;

• List;

• Table;

• Button;

• otros componentes.

Ejemplo

Panel Características
├── Heading
├── List
└── Paragraph

Puedes editar esos componentes normalmente

No necesitas modificar el componente Tabs completo

para cambiar un Paragraph dentro del panel.

Utiliza Navigator para seleccionar el nivel correcto

Una pestaña puede contener mucho contenido

Pero pregúntate si sigue siendo práctico.

Por ejemplo:

Tab 1
→ 2.000 palabras

Tab 2
→ 1 línea

Tab 3
→ 3 imágenes

puede generar una experiencia muy desequilibrada.

Intenta mantener una relación razonable

No necesitan ser idénticas,

pero deberían pertenecer al mismo nivel de información.

Buen ejemplo

Descripción
→ introducción

Características
→ lista

Especificaciones
→ Table

Todos forman parte de la información de un mismo producto o servicio.

Mal ejemplo

Descripción
Quiénes somos
Política de privacidad
Contacto
Carrito

Son contenidos demasiado diferentes para agruparlos como Tabs.

Cantidad de Tabs

No existe una cantidad obligatoria.

Tres

[ A ][ B ][ C ]

suelen ser fáciles de comprender.

Cuatro

[ A ][ B ][ C ][ D ]

también pueden funcionar.

Pero diez pestañas

[ A ][ B ][ C ][ D ][ E ][ F ][ G ][ H ][ I ][ J ]

pueden volverse difíciles de utilizar,

especialmente en celular.

Si tienes muchas categorías

considera:

• Accordeon;

• varias secciones;

• navegación;

• otra estructura.

No reduzcas el texto de las pestañas hasta hacerlo incomprensible

Ejemplo

En lugar de:

Información acerca de las características técnicas

puedes utilizar:

Características

Textos de Tabs

Mantén nombres:

• breves;

• descriptivos;

• diferentes entre sí.

Evita

Más

Otros

Info

si puedes explicar mejor el contenido.

Ejemplo

Descripción
Especificaciones
Descargas

es más claro.

Tabs y estado activo

Un Tabs necesita comunicar visualmente cuál pestaña está seleccionada.

Conceptualmente:

[ DESCRIPCIÓN ] [ CARACTERÍSTICAS ] [ ENVÍOS ]
      ↑
   ACTIVA

Puede diferenciarse mediante

• Background;

• Border;

• Text Color;

• Font weight;

según el diseño.

No hagas todas las pestañas visualmente idénticas

si después resulta imposible saber cuál está activa.

Pero ten cuidado con el selector de estado active

Dentro de Estilo existe una opción:

active

que permite personalizar estados CSS.

Eso no significa que agregar un estilo Active cree automáticamente toda la lógica del Tabs.

La lógica de selección debe existir en el componente

Personaliza un componente que ya funciona

en lugar de intentar construir su lógica solamente con estilos.

Hover en Tabs

Puede ayudar a indicar:

esta pestaña puede seleccionarse.

Ejemplo

Normal:

fondo transparente

Hover:

fondo suave

Active:

fondo de marca

Mantén diferencia entre Hover y Active

No hagas que Hover parezca exactamente igual que Active

porque el usuario puede pensar que cambió de pestaña sin haber hecho clic.

Tabs y Links

No asumas que una pestaña es un Link tradicional hacia otra página.

Puede ser un control que cambia contenido dentro del componente.

Por eso no reemplaces automáticamente una pestaña por:

Link

solo porque visualmente se puede hacer clic.

Podrías romper la interacción.

Clonar una pestaña: especial cuidado

Agregar una nueva pestaña puede requerir modificar dos partes relacionadas:

CONTROL
+
PANEL

Por ejemplo

Tienes:

[ DESCRIPCIÓN ]
→ Panel A

[ CARACTERÍSTICAS ]
→ Panel B

y quieres agregar:

[ DESCARGAS ]
→ Panel C

No deberías limitarte a clonar

[ CARACTERÍSTICAS ]

porque podrías crear un nuevo control sin panel independiente.

Tampoco clones solamente Panel B

porque no existiría un control que lo abra.

Debes conservar la relación completa

Conceptualmente

Nueva Tab
├── Control
└── Panel asociado

Dependiendo de la estructura real

puede ser necesario revisar HTML para comprender cómo se relacionan.

IDs internos

Este es uno de los mayores riesgos.

Un componente interactivo puede utilizar identificadores para relacionar:

Control A
↔
Panel A

Si clonas ambos y conservan exactamente los mismos IDs

puede ocurrir que:

• dos controles abran el mismo panel;

• una pestaña no abra nada;

• se active el contenido incorrecto;

• existan comportamientos duplicados.

Regla fundamental

No dupliques IDs dentro de una misma página.

Pero tampoco los renombres al azar

Los identificadores relacionados pueden necesitar actualizarse en más de un lugar.

Si necesitas modificar la estructura interactiva

utiliza:

Editar código HTML <>

sobre el componente correspondiente para comprender las referencias existentes.

No abras Code editor global como primera opción

Trabaja sobre el componente específico

Ejemplo conceptual

Podrías encontrar una relación similar a:

Control:
tab-caracteristicas

Panel:
panel-caracteristicas

o cualquier otra implementación equivalente.

No copies estos nombres literalmente

Son únicamente ejemplos conceptuales.

La estructura real de tu componente puede ser diferente.

Antes de duplicar

identifica:

1. control;

2. panel;

3. identificador del control;

4. identificador del panel;

5. referencia que los relaciona.

Después crea valores nuevos y únicos

solo si comprendes cómo funciona la relación.

Si el Tabs ya tiene la cantidad de pestañas que necesitas

es mucho más seguro:

reemplazar el contenido existente

que reconstruir su estructura interactiva.

Ejemplo

Plantilla:

TAB 1
TAB 2
TAB 3

Necesitas tres.

Simplemente conviértelas en:

Descripción
Características
Descargas

No clones nada.

Eliminar una pestaña

También requiere cuidado.

Una pestaña puede tener:

Control
+
Panel

Si eliminas solamente el control:

Panel huérfano

puede quedar contenido que ya no puede abrirse.

Si eliminas solamente el panel:

el control puede quedar visible pero no mostrar contenido.

Por eso, al retirar una pestaña:

elimina la unidad lógica completa.

Utiliza Navigator

y comprueba la estructura.

Después de eliminar

prueba todas las pestañas restantes.

No asumas que el componente sigue funcionando solo porque visualmente se ve bien.

Reordenar Tabs

También requiere mantener coherencia entre controles y contenido.

Antes

Descripción
Características
Descargas

Después

Descargas
Descripción
Características

puede ser válido.

Pero comprueba que:

Descargas

siga mostrando realmente:

Panel Descargas

No muevas solamente los títulos visuales

sin revisar la relación funcional.

Orden de Tabs

Coloca primero la información más consultada o importante.

Por ejemplo:

Descripción
Características
Especificaciones

puede ser más natural que:

Especificaciones
Descripción
Características

dependiendo del contenido.

No ordenes únicamente por longitud del texto

¿Cuál pestaña debería aparecer inicialmente?

El diseño puede tener una pestaña activa de inicio.

No existe una regla universal sobre cuál debe ser.

Normalmente conviene que la primera vista contenga información útil

Por ejemplo

Descripción

puede ser una opción lógica.

Pero no asumas que mover visualmente una pestaña modifica automáticamente cuál comienza activa

si la estructura interactiva utiliza estados internos.

Después de cualquier reordenamiento:

Guardar Cambios → Ver página → recargar → comprobar qué panel aparece primero.

Tabs responsive

Este es uno de los puntos más importantes.

Desktop

[ DESCRIPCIÓN ][ CARACTERÍSTICAS ][ ESPECIFICACIONES ]

puede funcionar perfectamente.

Mobile

las mismas pestañas pueden quedar:

[ DESCRIPCIÓN ][ CARACTERÍSTICAS ][ ESPECIFICACIONES ]

demasiado estrechas.

Posibles problemas

• texto cortado;

• Font size demasiado pequeño;

• Tabs fuera de pantalla;

• scroll horizontal inesperado;

• varias líneas difíciles de comprender.

No reduzcas automáticamente Font size

a valores mínimos.

Primero simplifica los nombres

Por ejemplo:

Información técnica detallada

puede ser:

Detalles técnicos

Si todavía no entra

revisa la estructura responsive.

Tabs pueden reorganizarse

Dependiendo de la composición y CSS, puede ser necesario permitir que las pestañas:

• se distribuyan;

• ocupen varias líneas;

• se adapten verticalmente.

No afirmes que Tabs se convertirá automáticamente en Accordeon

Eso dependería de una implementación específica.

Debes comprobar el comportamiento real.

Muchos Tabs en móvil

Si necesitas:

8 pestañas

quizá Accordeon sea una mejor decisión desde el comienzo.

El componente correcto evita soluciones responsive complejas.

Tabs y scroll horizontal

En determinados diseños, una barra de Tabs puede superar el ancho.

No soluciones globalmente con:

body {
    overflow-x: hidden;
}

Busca el origen.

Puede requerir:

• Wrap;

• Width;

• Padding menor;

• nombres más breves;

• otra composición.

Tabs y contenido de diferente altura

Tab A:

2 líneas

Tab B:

20 líneas

Al cambiar de pestaña

la altura total del componente puede variar.

Esto puede ser normal.

No fijes Height enorme solamente para que todas tengan el mismo tamaño

Podrías generar mucho espacio vacío.

Evita Height fija en paneles

cuando el contenido puede variar.

Tabs con Images

Un panel puede contener una imagen.

Por ejemplo:

[ DESCRIPCIÓN ]
texto

[ GALERÍA ]
Image

[ ESPECIFICACIONES ]
Table

Comprueba el responsive de cada panel individualmente.

No basta con revisar la navegación de Tabs

Tabs con Tables

Especial atención en móvil.

Puedes tener:

Tabs
└── Panel Especificaciones
    └── Table

El Tabs puede adaptarse bien

pero la Table puede desbordar.

Revisa cada nivel.

Tabs con formularios

Puede existir una composición:

[ CONSULTA ][ DESCARGA ]

donde un panel contiene Form.

Si el Form ya funciona:

no modifiques atributos funcionales solamente por estar dentro de Tabs.

Además prueba:

1. abrir la pestaña;

2. completar el Form;

3. enviar;

4. comprobar procesamiento.

No asumas que el Form funciona únicamente porque funciona fuera de Tabs.

¿Cómo agregar Accordeon?

Abre:

Componentes → Elementos → Accordeon

y agrega el componente dentro de la estructura correspondiente.

Utiliza Navigator inmediatamente

Una estructura conceptual puede ser:

Accordeon
├── Accordeon Item
│   ├── Header / Control
│   └── Content Panel
├── Accordeon Item
│   ├── Header / Control
│   └── Content Panel
└── Accordeon Item
    ├── Header / Control
    └── Content Panel

Cada Item posee dos partes conceptuales

CONTROL
→ título que se selecciona

PANEL
→ contenido que se abre

Por ejemplo

¿Qué incluye el servicio?
↓
Incluye configuración, capacitación...

Estas partes deben permanecer relacionadas

igual que en Tabs.

Editar el título

Selecciona el contenido visible.

Por ejemplo:

¿Cómo funciona?

puede cambiar a:

¿Cómo es el proceso?

Esto no debería requerir cambiar identificadores internos

si solamente estás modificando el texto visible.

Editar la respuesta

Selecciona el panel correspondiente.

Puede contener:

• Paragraph;

• List;

• Image;

• Link;

• otros componentes.

Ejemplo

Accordeon Item
├── ¿Qué incluye?
└── Panel
    ├── Paragraph
    └── List

No necesitas limitar cada panel a un único Paragraph

Pero mantén el contenido razonable

Un Accordeon con una respuesta de:

1.500 palabras

puede ser difícil de consultar.

Divide cuando sea necesario

Cantidad de Items

Accordeon puede manejar más elementos que Tabs cómodamente,

pero eso no significa que debas agregar:

50 Items

sin organización.

Si tienes muchas preguntas

puedes dividir:

COMPRAS

[ preguntas ]

ENVÍOS

[ preguntas ]

PAGOS

[ preguntas ]

Esto mejora la navegación.

No conviertas todo el contenido del sitio en un único Accordeon

Títulos de Accordeon

Deben permitir anticipar qué hay dentro.

Buenos ejemplos

¿Qué incluye el servicio?

¿Cuánto demora la implementación?

¿Qué necesito para comenzar?

Para contenidos no FAQ

Materiales

Medidas

Cuidados

Evita

Información 1

Más información

Otros

si puedes ser más específico.

¿Debe ser una pregunta?

No necesariamente.

FAQ

sí puede utilizar preguntas:

¿Realizan envíos?

Información técnica

puede utilizar:

Especificaciones

El contenido define el formato.

Clonar un Accordeon Item

Este es otro punto delicado.

No clones solamente el título

Tampoco solamente la respuesta.

Clona la unidad completa:

Accordeon Item
├── Control
└── Panel

Después actualiza

• título;

• contenido;

• Links;

• IDs si corresponde;

• referencias internas relacionadas.

Igual que Tabs

un Accordeon interactivo puede utilizar identificadores para relacionar el control con su panel.

Al clonar

puede existir riesgo de IDs duplicados.

Por eso después de clonar:

prueba todos los Items, incluido el original.

No pruebes solamente el nuevo.

Ejemplo de error

Antes:

Pregunta A
→ Respuesta A

Después de clonar:

Pregunta A
→ Respuesta A

Pregunta B
→ Respuesta A

O:

Pregunta B
→ no abre

Eso puede indicar que la relación interna no quedó correctamente actualizada.

No intentes solucionarlo mediante CSS

La relación control-panel es estructural o funcional.

Eliminar un Accordeon Item

Selecciona la unidad completa.

Si eliminas solamente Header:

puede quedar un panel inaccesible.

Si eliminas solamente Panel:

puede quedar un control que no muestra nada.

Utiliza Navigator.

Recuerda:

Waclis no solicita confirmación al eliminar.

Si eliminas el nivel incorrecto:

Deshacer

Reordenar Items

Accordeon puede ordenarse por:

• importancia;

• recorrido del cliente;

• frecuencia;

• tema;

• proceso;

según el contenido.

FAQ

puede comenzar con preguntas más frecuentes.

Especificaciones

puede seguir una lógica:

Características
Medidas
Materiales
Cuidados

Después de mover un Item

prueba que abra su propia respuesta.

No muevas solamente el Header

Accordeon y estado abierto/cerrado

El diseño puede determinar si algún Item aparece inicialmente abierto.

No existe una regla universal.

Puede ser útil abrir inicialmente:

• la primera pregunta;

• el contenido más importante;

según el diseño.

Pero no afirmaremos un control específico del editor para modificar ese estado porque dependerá de la estructura utilizada.

Si necesitas cambiarlo mediante HTML

primero identifica cómo el componente actual define su estado.

No agregues o elimines Classes como:

active
show
collapsed

u otras similares simplemente porque las encuentras,

sin comprender la lógica de la implementación.

Esas Classes pueden controlar estados interactivos.

Accordeon y mobile

Un Accordeon vertical suele resultar especialmente útil en celular porque:

TÍTULO
↓
CONTENIDO

utiliza naturalmente el ancho disponible.

Pero todavía debes revisar:

• Padding;

• iconos;

• títulos largos;

• Paragraphs;

• Links;

• imágenes.

Títulos largos

Por ejemplo:

¿Qué documentación debo presentar para solicitar la instalación del servicio?

puede ocupar varias líneas.

Eso puede ser correcto.

No reduzcas Font size hasta hacerlo difícil de leer.

Permite que el Header crezca en altura.

No utilices Height fija en Header

si el texto puede variar.

Indicador visual

El Accordeon suele utilizar algún indicador que comunica:

cerrado
+

y:

abierto
−

o una variante visual equivalente.

Este indicador debería acompañar el estado real.

No cambies manualmente:

+

por:

−

como texto estático

si el componente utiliza lógica para modificarlo.

Podrías mostrar un indicador incorrecto.

Si quieres personalizar su apariencia:

identifica primero cómo está implementado.

No reemplaces un control funcional por un icono decorativo sin revisar.

Accordeon y Hover

El Header es interactivo.

Puede utilizar un Hover sutil.

Por ejemplo:

normal
→ fondo blanco

hover
→ fondo gris suave

Pero el contenido desplegado no necesita Hover por ser parte del panel.

Evita que toda la respuesta parezca clicable

Accordeon y estado abierto

También debería existir una diferencia visual comprensible cuando corresponda.

Por ejemplo:

cerrado
→ texto normal

abierto
→ título con mayor énfasis

Pero mantén la lógica coherente con el estado real.

No simules estados solamente con CSS manual desconectado de la funcionalidad.

Tabs y Accordeon: ¿cuál conviene en celular?

Accordeon suele ser especialmente cómodo cuando hay:

• muchos Items;

• títulos largos;

• respuestas independientes.

Tabs puede ser excelente cuando hay:

• pocas categorías;

• nombres cortos;

• contenido equivalente.

Ejemplo

Tres categorías:

[ DETALLES ][ MEDIDAS ][ ENVÍOS ]

pueden funcionar perfectamente como Tabs.

Ocho categorías:

[ DETALLES ][ MEDIDAS ][ ENVÍOS ][ GARANTÍA ][ DESCARGAS ][ MATERIALES ][ CUIDADOS ][ FAQ ]

pueden resultar difíciles.

En ese caso evalúa otra estructura.

No elijas Tabs solamente porque en desktop se ve más elegante

El componente debe funcionar en toda la Página web.

Tabs y Accordeon en una misma página

Pueden convivir.

Por ejemplo:

PRODUCTO

Tabs:
Descripción | Especificaciones | Descargas

↓

FAQ

Accordeon:
¿Pregunta 1?
¿Pregunta 2?
¿Pregunta 3?

Cada uno resuelve una necesidad distinta.

No los combines innecesariamente dentro del mismo pequeño bloque

Ejemplo demasiado complejo

Tab
└── Accordeon
    └── Tabs
        └── Accordeon

puede resultar difícil de comprender y mantener.

Una capa de interacción suele ser suficiente

para la mayoría de los contenidos.

Accordeon dentro de Tabs

Puede existir un caso real,

pero pregunta primero si el contenido puede simplificarse.

Cuanta más interacción anidada

mayor será la complejidad de:

• edición;

• mobile;

• navegación;

• mantenimiento.

Contenido importante y SEO

Tabs y Accordeon son herramientas de organización.

No los utilices suponiendo que:

agregar una interacción específica garantiza automáticamente una mejora SEO.

La calidad depende principalmente de:

• contenido útil;

• estructura;

• claridad;

• relevancia.

No crees 30 preguntas únicamente para intentar “tener más SEO”.

Escribe información que realmente ayude al visitante.

Tabs y enlaces directos

No asumas que cada pestaña dispone automáticamente de una URL independiente que puedas compartir.

Eso dependerá de la implementación.

Si necesitas que cada contenido tenga una página propia o una URL específica:

puede ser mejor utilizar páginas separadas o Links.

No inventes anclas o parámetros sin comprobar cómo funciona el componente.

Accordeon y enlaces directos

Mismo principio.

Una pregunta desplegable no necesariamente tiene una URL individual.

Si necesitas enlazar directamente hacia información crítica:

evalúa si debería estar visible como sección independiente.

Accordeon y contenido comercial importante

Por ejemplo:

PRECIO

no debería ocultarse necesariamente en Accordeon si es una de las principales decisiones del visitante.

Lo mismo con:

CTA principal

No escondas la acción principal detrás de varios clics.

Accordeon y condiciones

Puede utilizarse para información complementaria.

Pero si existen condiciones esenciales:

hazlas fácilmente accesibles.

Tabs y CTA

Cada panel puede tener un CTA diferente.

Por ejemplo:

TAB EMPRESAS
→ [ CONTACTAR EMPRESAS ]

TAB PROFESIONALES
→ [ CONTACTAR ]

si los recorridos son realmente distintos.

Después de clonar o modificar:

prueba cada CTA.

No dejes Links de otro panel.

Tabs y Forms

Si cada Tab tiene un Form distinto:

comprueba que:

• los Forms no compartan IDs duplicados;

• cada Button corresponda al Form correcto;

• los datos lleguen a su destino real.

No clones un Form dentro de otro panel sin revisar atributos funcionales.

Accordeon con Links

Una respuesta puede contener:

Consulta la documentación →

Comprueba la URL.

No hagas que todo Header sea un Link externo

si además debe controlar la apertura del panel,

salvo que la estructura esté específicamente diseñada para eso.

Una misma acción no debería intentar:

abrir Accordeon
+
navegar a otra página

al mismo tiempo sin una razón clara.

Accordeon con Images

Puedes incluir imágenes dentro del Panel.

Pero si todas las respuestas contienen fotografías pesadas:

el componente puede volverse una sección muy pesada.

El hecho de que una imagen esté inicialmente oculta visualmente no significa necesariamente que debas ignorar su impacto en la página.

Utiliza imágenes solo cuando aportan.

Tabs con multimedia

Mismo principio.

No agregues:

• videos;

• mapas;

• embeds;

en cada pestaña solamente porque pueden ocultarse.

Mantén la página razonable.

Componentes interactivos y Navigator

Este es uno de los usos más importantes de Navigator.

En un componente estático

seleccionar:

Heading

es relativamente sencillo.

En Tabs o Accordeon

necesitas comprender:

¿Estoy seleccionando:
- el control?
- el panel?
- el Item completo?
- el componente completo?

Antes de:

• clonar;

• eliminar;

• mover;

comprueba el nivel exacto.

Seleccionar padre

También puede ayudarte.

Ejemplo

Seleccionaste:

Paragraph

dentro de:

Panel

Puedes utilizar:

Seleccionar padre

hasta llegar al panel o Item que necesitas.

Pero no continúes subiendo niveles sin observar qué estás seleccionando.

Podrías terminar en:

Tabs completo

y eliminarlo por accidente.

Recuerda

eliminar no solicita confirmación.

Deshacer

Si eliminas el componente incorrecto:

utiliza Deshacer inmediatamente.

Componentes interactivos y IDs

Repasemos el principio:

ID
→ debe ser único

Pero en componentes interactivos

un ID puede además estar relacionado con otro elemento.

Por eso:

mantener unicidad no es suficiente; también debe mantenerse la relación correcta.

Ejemplo conceptual

Control X
→ abre Panel X

Cambiar solamente:

Panel X
→ Panel Y

sin actualizar la referencia puede romperlo.

Nunca renombres IDs por estética

Los IDs no necesitan ser bonitos para el visitante

Si el componente funciona:

no los toques salvo necesidad.

Classes estructurales

Mismo principio.

Puedes encontrar Classes que controlan:

• visualización;

• estado;

• layout;

• interacción.

No elimines una Class porque:

“no sé para qué sirve”

Primero investiga su función.

Para personalización visual

agrega una Class propia.

Por ejemplo:

product-tabs-custom

O:

faq-accordion-custom

Después limita CSS a esa estructura.

CSS para Tabs

Puedes personalizar:

• separación;

• Typography;

• Border;

• Background;

• Hover;

• Active.

Ejemplo conceptual

.product-tabs-custom .tab-control {
    padding: 12px 18px;
}

Y:

.product-tabs-custom .tab-control:hover {
    opacity: .85;
}

Estas Classes son solamente ejemplos

No representan la estructura original del componente.

Debes inspeccionar las Classes reales antes de escribir CSS.

No utilices globalmente

.nav-link {
    ...
}

si no sabes qué otros elementos de navegación utilizan esa Class.

Puede afectar:

• navegación;

• Tabs;

• otros componentes.

Tampoco:

.active {
    ...
}

globalmente.

.active puede aparecer en muchas partes de una Página web.

Este selector sería especialmente peligroso.

Siempre utiliza scope

Por ejemplo:

.product-tabs-custom .active {
    ...
}

solo si esa es realmente la estructura correcta.

CSS para Accordeon

Mismo principio.

Ejemplo conceptual:

.service-accordion-custom .accordion-header {
    padding: 16px 20px;
}

Pero no utilices globalmente:

.collapse {
    display: block !important;
}

Esto podría destruir la funcionalidad interactiva.

Este es un ejemplo especialmente importante

Una regla global que fuerce contenido oculto a mostrarse puede provocar que todos los paneles permanezcan abiertos.

Tampoco utilices globalmente:

.collapsed {
    ...
}

sin comprender dónde aparece.

No utilices !important como primera solución

Si un panel no se abre

no intentes solucionarlo forzando:

display: block !important;

Eso no repara la relación funcional.

Solo obliga a mostrar contenido.

Diagnostica la causa.

HTML del elemento

Para estos componentes el botón:

Editar código HTML <>

puede ser especialmente útil.

Utilízalo si necesitas comprender:

• jerarquía;

• control;

• panel;

• IDs;

• referencias;

• Classes.

No modifiques todavía

Primero observa.

Una estrategia segura

1. Abrir HTML
2. Identificar estructura
3. Cerrar sin cambios
4. Planificar
5. Modificar solamente lo necesario

No copies el HTML completo de otro componente desde Internet

La estructura existente puede estar adaptada al editor y a la Página web.

Code editor global

No lo necesitas para:

• cambiar una pregunta;

• editar una respuesta;

• cambiar el nombre de una pestaña;

• modificar color.

Utiliza el editor visual.

Reserva Code editor para casos avanzados.

JavaScript

Tabs y Accordeon son componentes interactivos.

Si ya funcionan:

no agregues otro JavaScript para recrear la misma interacción.

Dos implementaciones diferentes pueden entrar en conflicto.

No agregues librerías externas

solamente porque encontraste un tutorial que crea Tabs o Accordeon desde cero.

Primero aprovecha el componente existente.

Si deja de funcionar después de una modificación

revisa antes:

• estructura;

• IDs;

• Classes;

• atributos;

• elementos eliminados.

No asumas inmediatamente que falta JavaScript.

Bootstrap y componentes interactivos

Waclis utiliza Bootstrap 4 en el entorno actual de la Página web.

Algunos componentes interactivos pueden depender de estructuras o Classes compatibles con ese entorno.

Por eso

si solicitas ayuda a ChatGPT, Claude o Gemini:

indica:

Waclis utiliza Bootstrap 4.

No pidas automáticamente:

“Actualiza este componente a Bootstrap 5”

si la Página web utiliza Bootstrap 4.

Tampoco reemplaces Classes estructurales por equivalentes de otra versión sin verificar.

Esto puede romper la interacción.

No mencionamos la tecnología interna del Editor

Para utilizar correctamente Tabs y Accordeon no necesitas conocer la herramienta interna con la que está construido el Editor de bloques.

Trabaja con:

• componentes;

• Navigator;

• Contenido;

• Estilo;

• HTML cuando sea necesario.

Ejemplo práctico 1: Tabs de producto

Queremos:

[ DESCRIPCIÓN ][ ESPECIFICACIONES ][ DESCARGAS ]

Paso 1

Agrega:

Componentes → Elementos → Tabs

Paso 2

Abre Navigator.

Paso 3

Identifica:

• controles;

• paneles.

Paso 4

Renombra las pestañas.

Paso 5

Edita el Panel Descripción.

Paso 6

Edita Especificaciones.

Puede contener:

Table

si realmente son datos tabulares.

Paso 7

Edita Descargas.

Puede contener Links hacia recursos reales.

Paso 8

No modifiques IDs o Classes internas sin necesidad.

Paso 9

Personaliza:

• Typography;

• Background;

• Border;

• Hover;

• estado Active.

Paso 10

Revisa desktop.

Paso 11

Revisa tablet.

Paso 12

Revisa celular.

Paso 13

Guardar Cambios.

Paso 14

Ver página.

Paso 15

Selecciona cada pestaña.

Paso 16

Comprueba que:

DESCRIPCIÓN
→ muestra Descripción

ESPECIFICACIONES
→ muestra Especificaciones

DESCARGAS
→ muestra Descargas

Paso 17

Prueba cualquier Link interno.

Ejemplo práctico 2: Accordeon de servicio

Queremos:

¿Qué incluye?                    +

¿Cómo trabajamos?                +

¿Qué necesitamos para comenzar?  +

Paso 1

Agrega:

Componentes → Elementos → Accordeon

Paso 2

Utiliza Navigator.

Paso 3

Identifica cada Item completo.

Paso 4

Modifica títulos.

Paso 5

Modifica cada Panel.

Paso 6

Elimina Items innecesarios como unidad completa.

Paso 7

Si necesitas un Item adicional:

clona la unidad completa y revisa la relación funcional.

Paso 8

Personaliza el diseño.

Paso 9

Revisa mobile.

Paso 10

Guardar Cambios.

Paso 11

Ver página.

Paso 12

Abre y cierra todos los Items.

Ejemplo práctico 3: FAQ mediante Accordeon

PREGUNTAS FRECUENTES

¿Realizan envíos?                   +

¿Puedo solicitar una cotización?    +

¿Cómo me contacto?                  +

Cada respuesta debe ser

• correcta;

• concreta;

• actualizada.

El Accordeon solamente presenta las FAQ

no crea las respuestas.

Ejemplo práctico 4: Tabs para públicos diferentes

[ EMPRESAS ][ PROFESIONALES ]

Empresa:

Contenido específicamente destinado a empresas.

Profesionales:

Contenido específicamente destinado a profesionales.

Utilízalo solamente si las diferencias son reales.

No dupliques el mismo Paragraph en ambas Tabs

sin aportar una diferencia significativa.

Si todo el contenido es igual

no necesitas Tabs.

Ejemplo práctico 5: especificaciones mediante Accordeon

MATERIALES                        +

MEDIDAS                           +

CUIDADOS                          +

INFORMACIÓN DE ENTREGA            +

Puede ser útil si cada apartado necesita bastante explicación.

Si son solamente cuatro datos breves:

una Table o List puede ser más directa.

No utilices interacción cuando el contenido simple es más claro

¿Qué hacer si al hacer clic en una Tab no ocurre nada?

Revisa:

1. ¿funcionaba antes?

2. ¿modificaste IDs?

3. ¿modificaste Classes?

4. ¿eliminaste algún atributo?

5. ¿clonaste el control?

6. ¿existe el panel relacionado?

No agregues JavaScript inmediatamente.

¿Qué hacer si una Tab abre el panel incorrecto?

Puede existir una relación incorrecta entre:

Control
↔
Panel

Revisa los identificadores y referencias.

No lo resuelvas simplemente cambiando el texto del panel.

¿Qué hacer si dos Tabs abren el mismo contenido?

Busca:

• IDs duplicados;

• referencias duplicadas;

• un panel faltante.

Especialmente si ocurrió después de clonar.

¿Qué hacer si todos los paneles aparecen al mismo tiempo?

Revisa:

• Classes de estado;

• estructura;

• CSS personalizado.

Busca especialmente reglas que puedan estar forzando:

display
visibility

No uses CSS para forzar todos visibles

si quieres mantener Tabs.

¿Qué hacer si ningún panel aparece?

Mismo diagnóstico.

No reconstruyas el componente entero antes de identificar el cambio que lo rompió.

¿Qué hacer si una pestaña está activa pero el texto parece inactivo?

Revisa los estilos de estado.

Puede ser problema visual,

no funcional.

Comprueba:

• Active;

• Text Color;

• Background;

• Border.

¿Qué hacer si Hover y Active son iguales?

Haz que el estado activo tenga una diferencia clara.

¿Qué hacer si Tabs desborda en celular?

Revisa:

1. cantidad de Tabs;

2. longitud de títulos;

3. Padding;

4. Width;

5. posibilidad de Wrap;

6. si Accordeon sería una estructura mejor.

No reduzcas todo a 8 px.

¿Qué hacer si quiero que Tabs se convierta en Accordeon en celular?

No asumas que el componente lo hace automáticamente.

Eso requeriría una implementación específica.

Primero evalúa si:

• Tabs adaptable es suficiente;

• conviene utilizar Accordeon para todos los tamaños.

Evita mantener dos versiones distintas

si una sola estructura puede resolver el contenido.

¿Qué hacer si un Panel es demasiado alto?

Revisa el contenido.

Tal vez tiene:

• demasiados Paragraphs;

• imágenes demasiado grandes;

• Padding excesivo.

No fijes Height para ocultar parte del contenido.

¿Qué hacer si cambiar de Tab mueve toda la página?

Puede deberse a diferentes alturas de contenido.

Esto puede ser normal.

Si el salto resulta excesivo:

revisa la diferencia de cantidad de contenido,

no solamente CSS.

¿Qué hacer si cloné una Tab y ambas tienen el mismo ID?

Debes corregir la estructura manteniendo:

• IDs únicos;

• referencia correcta control-panel.

No cambies únicamente un ID sin revisar el elemento relacionado.

¿Qué hacer si no sé qué referencias cambiar?

No adivines.

Abre:

Editar código HTML <>

y estudia el componente existente.

También puedes solicitar ayuda a una IA

proporcionando únicamente el HTML de ese componente.

¿Qué hacer si al eliminar una Tab queda espacio vacío?

Puede quedar:

• Panel;

• wrapper;

• estructura interna.

Utiliza Navigator.

No elimines elementos adicionales indiscriminadamente.

¿Qué hacer si Accordeon no abre?

Mismo diagnóstico:

• ID;

• referencia;

• Class;

• estructura;

• CSS.

¿Qué hacer si un Item abre otro?

Probablemente existe una relación incorrecta.

¿Qué hacer si dos Items se abren juntos?

Puede existir:

• identificador duplicado;

• relación compartida;

• comportamiento propio de la implementación.

Si antes no ocurría y comenzó después de clonar:

revisa el Item clonado.

¿Qué hacer si quiero permitir varios Items abiertos?

El comportamiento exacto depende de la implementación del Accordeon.

No afirmaremos que existe un control visual específico para cambiarlo.

Si necesitas modificar ese funcionamiento:

primero revisa la estructura HTML y el comportamiento existente.

No elimines atributos al azar.

¿Qué hacer si quiero que solo uno pueda abrirse?

Mismo principio.

Comprueba primero cómo se comporta el componente actual.

¿Qué hacer si el icono +/− no coincide con el estado?

Revisa:

• estructura;

• Classes;

• icono;

• CSS.

No cambies el símbolo estáticamente sin comprender el mecanismo.

¿Qué hacer si el título de Accordeon se corta?

Evita:

• Height fija;

• white-space: nowrap;

si necesitas varias líneas.

Permite que el Header crezca.

¿Qué hacer si aparece mucho espacio entre Items?

Revisa:

• Margin;

• Padding;

• Border.

No ajustes cada Item individualmente si todos deberían compartir estilo.

Utiliza Linked styles.

¿Qué hacer si cambio el Padding de uno y cambian todos?

Probablemente comparten una Class.

Eso puede ser correcto.

Si solamente uno necesita una excepción:

agrega una Class adicional.

¿Qué hacer si quiero que una pregunta sea destacada?

Pregúntate primero si debería ir:

primera

en lugar de tener un diseño completamente diferente.

Si realmente necesita destaque:

puedes agregar una Class adicional.

No agregues un ID distinto a cada Item solamente para cambiar colores.

¿Qué hacer si quiero numerar Accordeon?

Puedes utilizar títulos como:

01. Relevamiento
02. Configuración
03. Puesta en marcha

si representa una secuencia.

Pero si la secuencia es la información principal:

Timeline puede ser una alternativa más clara.

No utilices Accordeon para ocultar el orden de un proceso importante.

¿Qué hacer si quiero mostrar las respuestas siempre abiertas?

Entonces pregunta si necesitas realmente Accordeon.

Puede ser más sencillo:

Heading
Paragraph

Heading
Paragraph

No mantengas interacción innecesaria.

¿Qué hacer si quiero solo dos contenidos?

Tabs puede funcionar:

[ OPCIÓN A ][ OPCIÓN B ]

Accordeon también.

Elige según:

• longitud;

• tipo de contenido;

• mobile;

• necesidad de comparación.

¿Qué hacer si necesito comparar ambos al mismo tiempo?

Tabs puede no ser adecuado,

porque normalmente se visualiza un contenido por selección.

Si la comparación simultánea es importante:

puede ser mejor:

• Grid;

• Table;

• Cards.

Ejemplo

Comparar:

Plan A
vs.
Plan B

quizá sea mejor con:

Tabla de precios

¿Qué hacer si el usuario necesita copiar información de dos Tabs?

Evalúa si ocultarla alternativamente dificulta la tarea.

No utilices Tabs solo para ahorrar espacio si perjudica la comparación.

Accordeon y FAQ largas

Organiza por categorías.

Ejemplo

COMPRAS

¿Cómo comprar?
¿Puedo modificar un pedido?

ENVÍOS

¿A dónde realizan envíos?
¿Cuánto demora?

Esto es mejor que 25 preguntas sin estructura.

Tabs y mantenimiento

Si cambia una categoría:

actualiza:

• título;

• contenido;

• Links.

Si eliminas una categoría:

retira también su panel.

Accordeon y mantenimiento

Si una pregunta deja de ser válida:

• actualízala;

• elimínala como unidad completa.

No mantengas respuestas desactualizadas.

Especialmente:

• precios;

• tiempos;

• políticas;

• requisitos;

• disponibilidad.

Componentes interactivos no actualizan contenido automáticamente

Tabs no sabe que cambió una condición.

Accordeon tampoco.

Debes mantener los textos manuales.

CSS global peligroso en Tabs

Evita:

.nav {
    ...
}

sin scope.

Puede afectar otras navegaciones.

Evita:

.nav-link {
    color: red;
}

globalmente.

Puede afectar:

• Tabs;

• Nav Bar;

• otros componentes.

Evita:

.active {
    background: red;
}

globalmente.

Es especialmente peligroso.

CSS global peligroso en Accordeon

Evita reglas generales sobre Classes de interacción.

Especialmente cualquier regla que obligue a:

mostrar

o:

ocultar

todos los paneles.

No utilices:

.collapse {
    display: block !important;
}

como solución rápida.

Puede eliminar completamente la interacción.

Conserva el comportamiento existente.

CSS localizado

Puedes agregar una Class al componente raíz.

Por ejemplo:

product-tabs-custom

Después:

.product-tabs-custom .elemento {
    ...
}

Para Accordeon:

service-accordion-custom

Después:

.service-accordion-custom .elemento {
    ...
}

Estos nombres son ejemplos

Debes utilizar los selectores reales de tu componente.

No reemplaces Classes originales

Agrega una Class adicional.

Linked styles

Tabs puede compartir estilos entre:

• controles;

• paneles.

Accordeon puede compartir entre:

• Headers;

• Items;

• paneles.

Esto es útil para mantener consistencia.

Por ejemplo

todos los Headers de Accordeon deberían tener:

• mismo Padding;

• misma Typography;

• mismo Border.

Si modificas uno y cambian todos:

puede ser correcto.

Si necesitas una excepción:

agrega Class adicional.

Animaciones

Un componente interactivo puede incluir su propio comportamiento de apertura.

No agregues:

Animate on scroll

a cada parte interna sin necesidad.

Por ejemplo

Accordeon:

Header
→ animación A

Icon
→ animación B

Panel
→ animación C

puede generar una interacción excesiva.

Si quieres animar la Section:

puede ser suficiente hacerlo al ingresar en pantalla.

No interfieras con la animación propia de apertura.

Tabs y Animate on scroll

Mismo principio.

Si cada panel inicia una animación inesperada cada vez que se muestra,

evalúa si mejora realmente la experiencia.

Mantén simple.

Accesibilidad: Tabs

La pestaña activa debe ser identificable.

Los controles deben ser legibles.

No dependas únicamente de:

un cambio mínimo de color

que resulte difícil de percibir.

Mantén suficiente contraste.

Accesibilidad: Accordeon

El Header debería comunicar que es interactivo.

El indicador de apertura ayuda,

pero el título debe seguir siendo claro.

No dependas únicamente del icono.

Accesibilidad: teclado y foco

Si personalizas CSS:

no elimines indiscriminadamente indicadores de foco.

Por ejemplo:

outline: none;

sobre todos los controles

puede dificultar la navegación mediante teclado.

Si eliminas un estilo existente:

deberías proporcionar una alternativa clara.

No necesitas modificar foco para personalizar Background.

Utilizar IA para decidir Tabs o Accordeon

Puedes utilizar ChatGPT, Claude o Gemini.

Por ejemplo:

Tengo estos contenidos:

[lista]

Necesito decidir si presentarlos mediante:
- Tabs;
- Accordeon;
- contenido visible normal.

Analiza:
- cantidad de elementos;
- longitud de cada contenido;
- necesidad de comparación;
- experiencia en celular.

No inventes contenido.

IA para simplificar títulos de Tabs

Tengo estas pestañas:

[lista]

Necesito nombres de máximo 3 palabras.

Mantén el significado.

No combines categorías diferentes.
No inventes nuevas Tabs.

IA para organizar Accordeon

Tengo estas preguntas:

[lista]

Agrúpalas por tema.

Mantén todas las preguntas.
No inventes respuestas.
No agregues categorías innecesarias.

IA para revisar FAQ

Tengo estas preguntas y respuestas:

[pegar]

Revisa:
- preguntas repetidas;
- respuestas que se contradicen;
- respuestas demasiado largas;
- información que parece desactualizada.

No inventes datos.
No corrijas información factual sin indicármelo.

IA para diagnosticar Tabs roto

Este prompt puede ser especialmente útil:

Este es únicamente el HTML de un componente Tabs de Waclis que funcionaba antes de ser modificado:

[pegar HTML]

Identifica:
1. controles de las pestañas;
2. paneles de contenido;
3. IDs;
4. referencias entre control y panel;
5. IDs duplicados;
6. Classes o atributos que parecen controlar el estado activo.

Waclis utiliza Bootstrap 4.

No reescribas el componente.
No cambies todavía el código.
No agregues JavaScript.

IA para agregar una Tab

Este Tabs de Waclis funciona correctamente:

[pegar únicamente HTML del componente]

Necesito agregar una cuarta pestaña.

Antes de modificar:
1. identifica el patrón repetible;
2. identifica control y panel;
3. identifica las referencias que los relacionan;
4. identifica los IDs que deberán ser únicos.

No generes todavía el código.
No elimines Classes existentes.
Waclis utiliza Bootstrap 4.

IA para revisar después de clonar

Cloné una pestaña en este componente:

[HTML]

Ahora dos pestañas muestran el mismo contenido.

Busca:
- IDs duplicados;
- referencias duplicadas;
- panel faltante;
- control apuntando al panel anterior.

No modifiques estilos.
No agregues JavaScript.

IA para Accordeon roto

Este Accordeon de Waclis dejó de funcionar después de clonar un Item:

[pegar HTML]

Identifica:
- cada Item;
- cada control;
- cada panel;
- IDs;
- referencias;
- duplicados.

Waclis utiliza Bootstrap 4.

No reescribas todo.
No agregues una nueva librería.

IA para agregar Item de Accordeon

Tengo este Accordeon que funciona:

[HTML]

Quiero agregar una nueva pregunta y respuesta.

Antes de generar cambios:
- identifica la unidad completa que debe duplicarse;
- señala IDs que deben ser únicos;
- señala referencias que deben mantenerse relacionadas.

No modifiques los Items existentes.

IA para CSS de Tabs

Tengo un componente Tabs en Waclis.

Raíz personalizada:
.product-tabs-custom

Necesito:
- controles claros;
- Padding cómodo;
- Hover suave;
- estado Active fácilmente reconocible;
- responsive;
- no afectar Nav Bar ni otros Tabs.

Waclis utiliza Bootstrap 4.

No cambies HTML.
No modifiques la lógica del componente.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .product-tabs-custom.

IA para CSS de Accordeon

Tengo un Accordeon en Waclis.

Raíz:
.service-accordion-custom

Necesito:
- Headers con Padding de 16 px;
- Borders sutiles;
- estado Hover moderado;
- permitir títulos de varias líneas;
- no fijar alturas;
- no modificar la lógica de apertura;
- no afectar otros Accordeon.

Waclis utiliza Bootstrap 4.

No cambies HTML.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .service-accordion-custom.

IA para detectar CSS que rompe interacción

Este Tabs/Accordeon dejó de comportarse correctamente después de agregar CSS:

[pegar CSS]

Busca reglas sobre:
- display;
- visibility;
- height;
- overflow;
- .active;
- .collapse;
- .show;
- .nav;
- .nav-link;

que puedan estar alterando estados interactivos.

No cambies el CSS.
Solo identifica riesgos.

IA para responsive de Tabs

Tengo 5 Tabs:

[lista]

En desktop entran correctamente.
En celular desbordan.

Antes de generar CSS analiza:
1. si los nombres pueden abreviarse sin perder significado;
2. si deberían permitir Wrap;
3. si la cantidad de Tabs hace más apropiado utilizar Accordeon.

No ocultes pestañas.
No reduzcas Font size por debajo de una lectura cómoda.

IA para comparar contenido

Quiero utilizar Tabs para estos contenidos:

[pegar]

Analiza si el usuario necesita comparar dos contenidos simultáneamente.

Si la comparación simultánea es importante, indícame por qué Tabs podría no ser la mejor opción.

No modifiques el contenido.

Buenas prácticas para Tabs

Recomendamos:

• utilizar pocas categorías claras;

• mantener nombres breves;

• agrupar contenidos equivalentes;

• utilizar Navigator;

• distinguir controles y paneles;

• conservar la relación entre ambos;

• no modificar IDs sin necesidad;

• mantener IDs únicos;

• revisar Active y Hover;

• probar todas las pestañas;

• revisar mobile;

• evitar Tabs si la comparación simultánea es importante;

• evitar demasiadas pestañas;

• mantener contenido actualizado.

Buenas prácticas para Accordeon

Recomendamos:

• utilizar títulos descriptivos;

• utilizarlo para información consultable;

• no ocultar contenido principal sin necesidad;

• seleccionar Items completos;

• conservar control + panel;

• revisar IDs después de clonar;

• organizar muchos Items por categorías;

• permitir títulos de varias líneas;

• evitar Heights fijas;

• probar todos los Items;

• mantener respuestas actualizadas;

• utilizar FAQ solamente para preguntas reales.

Buenas prácticas generales

• Utiliza el componente correcto según el contenido.

• Trabaja con Navigator.

• Conserva Classes estructurales.

• No renombres IDs por estética.

• Mantén IDs únicos.

• No clones únicamente el control.

• No clones únicamente el panel.

• No elimines solamente una mitad de la interacción.

• Prueba el frontend real.

• Utiliza CSS localizado.

• Evita selectores globales de estados.

• No agregues JavaScript si el componente ya funciona.

• No mezcles versiones de Bootstrap.

• Mantén el contenido útil y actualizado.

Errores frecuentes

Utilizar Tabs para una secuencia

Considera Timeline.

Utilizar Tabs para una navegación general

Utiliza Links o navegación.

Utilizar Tabs cuando los contenidos deben compararse simultáneamente

Considera Grid o Table.

Utilizar diez pestañas en celular

Simplifica o considera Accordeon.

Utilizar nombres de pestañas demasiado largos

Resume.

Utilizar “Más”, “Info”, “Otros” sin claridad

Sé descriptivo.

Clonar solamente el título de Tab

También necesitas su Panel.

Clonar solamente Panel

También necesita un control.

Dejar IDs duplicados

Puede romper la interacción.

Renombrar IDs sin actualizar referencias relacionadas

Puede abrir contenido incorrecto.

Eliminar solamente el control de una Tab

Puede quedar contenido huérfano.

Eliminar solamente el Panel

Puede quedar un control que no funciona.

Reordenar solamente los títulos

Comprueba la relación con los paneles.

Hacer Hover igual a Active

Dificulta reconocer el estado actual.

Utilizar CSS global sobre .active

Puede afectar toda la Página web.

Aplicar CSS global sobre .nav-link

Puede afectar navegación y Tabs.

Utilizar overflow-x:hidden para ocultar Tabs desbordados

Corrige el componente.

Fijar Height de Panels

Puede cortar contenido.

Utilizar Accordeon para todo el contenido

No todo necesita ocultarse.

Utilizar Accordeon para un proceso que debe entenderse completo

Considera Timeline.

Utilizar Accordeon para cuatro datos breves

Puede ser más claro List o Table.

Clonar solo el Header del Accordeon

Clona Item completo.

Clonar Item y dejar IDs internos duplicados

Revisa la relación.

Eliminar solo la pregunta

Puede quedar Panel huérfano.

Eliminar solo la respuesta

Puede quedar Header que no abre nada.

Forzar .collapse { display:block }

Puede destruir la interacción.

Cambiar Classes de estado sin comprenderlas

Puede alterar apertura y cierre.

Agregar JavaScript adicional a un componente que ya funciona

Puede generar conflictos.

Copiar estructura de otra versión de Bootstrap

Waclis utiliza Bootstrap 4.

No probar todos los controles

Un componente puede verse bien y estar funcionalmente roto.

Flujo recomendado para Tabs

1. DEFINIR LAS CATEGORÍAS
↓
2. COMPROBAR QUE TABS SEA ADECUADO
↓
3. AGREGAR / SELECCIONAR TABS
↓
4. ABRIR NAVIGATOR
↓
5. IDENTIFICAR CONTROLES
↓
6. IDENTIFICAR PANELES
↓
7. MODIFICAR TÍTULOS
↓
8. MODIFICAR CONTENIDOS
↓
9. CONSERVAR IDS / REFERENCES SI YA FUNCIONA
↓
10. PERSONALIZAR NORMAL / HOVER / ACTIVE
↓
11. REVISAR RESPONSIVE
↓
12. GUARDAR CAMBIOS
↓
13. VER PÁGINA
↓
14. PROBAR TODAS LAS PESTAÑAS

Flujo recomendado para Accordeon

1. DEFINIR LOS BLOQUES DE INFORMACIÓN
↓
2. COMPROBAR QUE ACCORDEON SEA ADECUADO
↓
3. AGREGAR / SELECCIONAR ACCORDEON
↓
4. ABRIR NAVIGATOR
↓
5. IDENTIFICAR CADA ITEM COMPLETO
↓
6. MODIFICAR HEADERS
↓
7. MODIFICAR PANELES
↓
8. CLONAR / ELIMINAR ITEMS COMPLETOS
↓
9. REVISAR IDS / RELACIONES
↓
10. PERSONALIZAR ESTILO
↓
11. REVISAR MOBILE
↓
12. GUARDAR CAMBIOS
↓
13. VER PÁGINA
↓
14. ABRIR Y CERRAR TODOS LOS ITEMS

Checklist antes de publicar Tabs

• Tabs es realmente el componente adecuado.

• Los contenidos son categorías relacionadas.

• No necesito compararlos simultáneamente.

• La cantidad de pestañas es razonable.

• Los títulos son breves y claros.

• Utilicé Navigator.

• Identifiqué cada control.

• Identifiqué cada Panel.

• Cada control abre el Panel correcto.

• No existen IDs duplicados.

• No modifiqué IDs funcionales sin necesidad.

• No eliminé Classes estructurales.

• El estado activo puede identificarse.

• Hover no se confunde con Active.

• El contenido de cada Panel está actualizado.

• Los Links dentro de cada Panel funcionan.

• Desktop funciona correctamente.

• Tablet funciona correctamente.

• Celular funciona correctamente.

• Las pestañas no desbordan.

• Los textos no se vuelven ilegibles.

• No oculté Tabs para solucionar mobile.

• No utilicé CSS global sobre .active.

• No utilicé CSS global peligroso sobre navegación.

• No agregué JavaScript innecesario.

• Guardé los cambios.

• Probé todas las pestañas mediante Ver página.

Checklist antes de publicar Accordeon

• Accordeon es realmente apropiado.

• El contenido puede consultarse individualmente.

• No oculté información esencial sin necesidad.

• Los títulos explican qué contiene cada Panel.

• Utilicé Navigator.

• Cada Item conserva Control + Panel.

• No existen Headers sin contenido.

• No existen Panels sin Header.

• No existen IDs duplicados.

• Los Items clonados fueron revisados.

• Los Items eliminados se retiraron completos.

• Cada Header abre su propio Panel.

• Las respuestas están actualizadas.

• Los Links internos funcionan.

• Los títulos pueden ocupar varias líneas.

• No utilicé Height fija innecesaria.

• El indicador visual coincide con el estado.

• El Hover es moderado.

• El componente funciona en celular.

• Checkbox, Form, Table o imágenes internas también se adaptan si existen.

• No forcé todos los Panels visibles mediante CSS.

• No eliminé Classes o atributos funcionales sin comprenderlos.

• No agregué JavaScript innecesario.

• Guardé los cambios.

• Abrí y cerré todos los Items mediante Ver página.

En resumen

Tabs y Accordeon permiten organizar información de forma interactiva, pero resuelven necesidades diferentes.

TABS

[ A ][ B ][ C ]

→ el visitante cambia entre categorías

Accordeon

A +

B +

C +

→ el visitante abre el contenido que quiere consultar.

Utiliza Tabs cuando tienes

• pocas categorías;

• nombres breves;

• contenidos equivalentes;

• información que no necesita verse simultáneamente.

Utiliza Accordeon cuando tienes

• preguntas;

• detalles;

• varios contenidos desplegables;

• información secundaria;

• títulos que funcionan bien verticalmente.

Recuerda además

FAQ
→ tipo de contenido

mientras:

ACCORDEON
→ forma de presentación

Una FAQ puede utilizar Accordeon, pero Accordeon no significa necesariamente FAQ.

La estructura interactiva es el punto crítico

Conceptualmente:

TABS

CONTROL
↕
PANEL

Y:

ACCORDEON ITEM

HEADER
↕
PANEL

Por eso no debes clonar, eliminar o renombrar partes indiscriminadamente.

Cuando un componente ya funciona

para cambios visuales modifica:

• Typography;

• color;

• Background;

• Border;

• Padding;

• Hover;

sin alterar innecesariamente:

• IDs;

• Classes estructurales;

• referencias;

• atributos funcionales.

Si necesitas agregar una nueva pestaña o Item

utiliza Navigator y, cuando sea necesario, Editar código HTML <> para comprender la relación completa antes de modificarla.

Y recuerda:

ID
→ único

pero en un componente interactivo además:

CONTROL
→ debe apuntar al PANEL correcto

No basta con que todos los IDs sean distintos.

También deben relacionarse correctamente.

Finalmente:

Guardar Cambios → Ver página → seleccionar todas las Tabs o abrir todos los Items → comprobar el contenido real.

Un componente interactivo no está correctamente configurado solamente porque:

“se ve bien”.

Debe verificarse también que:

cada control muestre exactamente el contenido que corresponde.

Ese control funcional es especialmente importante después de:

• clonar;

• eliminar;

• mover;

• editar HTML;

• modificar IDs o Classes.