Carregando documentação...

oziToggle

Versão: 2.3.0 — Atualizado em: 2026-04-12

Descrição

Plugin jQuery responsável por alternar a visibilidade de conteúdos pertencentes ao mesmo grupo, a partir de um único elemento de acionamento. O comportamento é baseado em inversão simples de estado: ao acionar o trigger, o conteúdo visível é ocultado e o conteúdo oculto é exibido.

Exemplos

[1] Clássico — dois conteúdos alternados

Conteúdo A — visível inicialmente.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

<div data-ozi-toggle-trigger="idConexao">
    <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">- Fechar</button>
    </span>
</div>

<div data-ozi-toggle-content="idConexao" style="display:block;">
    Conteúdo A
</div>

<div data-ozi-toggle-content="idConexao" style="display:none;">
    Conteúdo B
</div>

[2] Deslizante — animação slideDown/slideUp

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

<div data-ozi-toggle-trigger="idConexao">
    <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">- Fechar</button>
    </span>
</div>

<div data-ozi-toggle-content="idConexao"
     data-ozi-toggle-options="slide-time:700;">
    Conteúdo com animação deslizante
</div>

O slide-time ativa slideDown/slideUp com a duração em ms — neste caso 700ms.

[3] Com ícone animado

Abrir

Conteúdo A — visível inicialmente.

<div data-ozi-toggle-trigger="idConexao">
    <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>
        Fechar
    </span>
</div>

<div data-ozi-toggle-content="idConexao"
     data-ozi-toggle-options="slide-time:700;"
     style="display:block;">
    Conteúdo A
</div>

<div data-ozi-toggle-content="idConexao"
     data-ozi-toggle-options="slide-time:700;"
     style="display:none;">
    Conteúdo B
</div>

Recursos

Alternância por grupo — um trigger controla dois conteúdos pelo mesmo identificador
Indicadores visuais — show/hide alternam automaticamente com o conteúdo
Ícone animado — data-ozi-toggle-icon troca junto com o estado
Animação deslizante — slide-time ativa slideDown/slideUp configurável
Delegação de eventos — não precisa reinicializar após renders dinâmicos
Múltiplos grupos — vários grupos independentes na mesma página

Atributos HTML

[1] Estrutura

Atributo	Descrição
`data-ozi-toggle-trigger`	Elemento acionador — ao clicar executa a alternância
`data-ozi-toggle-content`	Conteúdo participante — responde ao trigger de mesmo identificador

[2] Indicadores Visuais

Atributo	Descrição
`data-ozi-toggle-show`	Visível quando o próximo clique irá mostrar o conteúdo oculto
`data-ozi-toggle-hide`	Visível quando o próximo clique irá ocultar o conteúdo visível
`data-ozi-toggle-icon`	Ícone opcional que troca junto com o estado do toggle

[3] Comportamento

Atributo	Exemplo	Descrição
`data-ozi-toggle-options`	`"slide-time:700;"`	Ativa animação deslizante com duração em ms

Regras

Cada grupo deve possuir um único trigger
Cada grupo deve possuir dois conteúdos
Os indicadores show/hide acompanham a alternância automaticamente
O clique executa a inversão entre os dois conteúdos do grupo

Fluxo de Ação

Ao clicar no trigger:

O conteúdo atualmente visível é ocultado
O conteúdo atualmente oculto é exibido
Os indicadores visuais show/hide são alternados
O data-ozi-toggle-icon troca conforme o novo estado

←

oziSearch

oziCopy

→