oziToggle

Versión: 2.0.0 — Actualizado: 2026-05-27

Descripción

Plugin jQuery responsable de alternar la visibilidad de contenidos pertenecientes al mismo grupo, a partir de un único elemento de activación. El comportamiento se basa en inversión simple de estado: al activar el trigger, el contenido visible se oculta y el contenido oculto se muestra.

Ejemplos

[1] Clásico — dos contenidos alternados

Contenido A — visible inicialmente.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500.

<div data-ozi-toggle-trigger="idConexion">
    <span data-ozi-toggle-show>
        <button type="button" class="btn btn-danger">+ Abrir</button>
    </span>
    <span data-ozi-toggle-hide>
        <button type="button" class="btn btn-danger">- Cerrar</button>
    </span>
</div>

<div data-ozi-toggle-content="idConexion" style="display:block;">
    Contenido A
</div>

<div data-ozi-toggle-content="idConexion" style="display:none;">
    Contenido B
</div>

[2] Deslizante — animación slideDown/slideUp

Es un hecho establecido que un lector se distrae con el contenido legible de una página cuando mira su diseño. El objetivo de usar Lorem Ipsum es que tiene una distribución más o menos normal de letras, en lugar de usar 'Contenido aquí, contenido aquí'.

<div data-ozi-toggle-trigger="idConexion">
    <span data-ozi-toggle-show>
        <button type="button" class="btn btn-danger">+ Abrir</button>
    </span>
    <span data-ozi-toggle-hide>
        <button type="button" class="btn btn-danger">- Cerrar</button>
    </span>
</div>

<div data-ozi-toggle-content="idConexion"
     data-ozi-toggle-options="slide-time:700;">
    Contenido con animación deslizante
</div>

slide-time activa slideDown/slideUp con la duración en ms — en este caso 700ms.

[3] Con icono animado

Abrir

Contenido A — visible inicialmente.

<div data-ozi-toggle-trigger="idConexion">
    <span data-ozi-toggle-show>
        <i data-ozi-toggle-icon class="bi bi-arrow-down-circle-fill"></i>
        Abrir
    </span>
    <span data-ozi-toggle-hide>
        <i data-ozi-toggle-icon class="bi bi-arrow-up-circle-fill"></i>
        Cerrar
    </span>
</div>

<div data-ozi-toggle-content="idConexion"
     data-ozi-toggle-options="slide-time:700;"
     style="display:block;">
    Contenido A
</div>

<div data-ozi-toggle-content="idConexion"
     data-ozi-toggle-options="slide-time:700;"
     style="display:none;">
    Contenido B
</div>

Características

Alternancia por grupo — un trigger controla dos contenidos por el mismo identificador
Indicadores visuales — show/hide alternan automáticamente con el contenido
Icono animado — data-ozi-toggle-icon cambia junto con el estado
Animación deslizante — slide-time activa slideDown/slideUp configurable
Delegación de eventos — no necesita reinicializar tras renders dinámicos
Múltiples grupos — varios grupos independientes en la misma página

Atributos HTML

[1] Estructura

Atributo	Descripción
`data-ozi-toggle-trigger`	Elemento activador — al hacer clic ejecuta la alternancia
`data-ozi-toggle-content`	Contenido participante — responde al trigger con el mismo identificador

[2] Indicadores Visuales

Atributo	Descripción
`data-ozi-toggle-show`	Visible cuando el próximo clic mostrará el contenido oculto
`data-ozi-toggle-hide`	Visible cuando el próximo clic ocultará el contenido visible
`data-ozi-toggle-icon`	Icono opcional que cambia junto con el estado del toggle

[3] Comportamiento

Atributo	Ejemplo	Descripción
`data-ozi-toggle-options`	`"slide-time:700;"`	Activa animación deslizante con duración en ms

Reglas

Cada grupo debe tener un único trigger
Cada grupo debe tener dos contenidos
Los indicadores show/hide acompañan la alternancia automáticamente
El clic ejecuta la inversión entre los dos contenidos del grupo

Flujo de Acción

Al hacer clic en el trigger:

El contenido actualmente visible se oculta
El contenido actualmente oculto se muestra
Los indicadores visuales show/hide se alternan
El data-ozi-toggle-icon cambia según el nuevo estado