oziToggle

Version: 2.0.0 — Updated: 2026-05-27

Description

jQuery plugin responsible for toggling the visibility of contents belonging to the same group, triggered by a single activation element. The behavior is based on simple state inversion: when the trigger is activated, the visible content is hidden and the hidden content is displayed.

Examples

[1] Classic — two alternating contents

Content A — visible initially.

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="connectionId">
    <span data-ozi-toggle-show>
        <button type="button" class="btn btn-danger">+ Open</button>
    </span>
    <span data-ozi-toggle-hide>
        <button type="button" class="btn btn-danger">- Close</button>
    </span>
</div>

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

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

[2] Sliding — slideDown/slideUp animation

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="connectionId">
    <span data-ozi-toggle-show>
        <button type="button" class="btn btn-danger">+ Open</button>
    </span>
    <span data-ozi-toggle-hide>
        <button type="button" class="btn btn-danger">- Close</button>
    </span>
</div>

<div data-ozi-toggle-content="connectionId"
     data-ozi-toggle-options="slide-time:700;">
    Content with sliding animation
</div>

slide-time enables slideDown/slideUp with duration in ms — in this case 700ms.

[3] With animated icon

Open

Content A — visible initially.

<div data-ozi-toggle-trigger="connectionId">
    <span data-ozi-toggle-show>
        <i data-ozi-toggle-icon class="bi bi-arrow-down-circle-fill"></i>
        Open
    </span>
    <span data-ozi-toggle-hide>
        <i data-ozi-toggle-icon class="bi bi-arrow-up-circle-fill"></i>
        Close
    </span>
</div>

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

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

Features

Group toggling — one trigger controls two contents by the same identifier
Visual indicators — show/hide alternate automatically with the content
Animated icon — data-ozi-toggle-icon swaps together with the state
Sliding animation — slide-time enables configurable slideDown/slideUp
Event delegation — no need to reinitialize after dynamic renders
Multiple groups — several independent groups on the same page

HTML Attributes

[1] Structure

Attribute	Description
`data-ozi-toggle-trigger`	Trigger element — clicking it executes the toggle
`data-ozi-toggle-content`	Participating content — responds to the trigger with the same identifier

[2] Visual Indicators

Attribute	Description
`data-ozi-toggle-show`	Visible when the next click will show the hidden content
`data-ozi-toggle-hide`	Visible when the next click will hide the visible content
`data-ozi-toggle-icon`	Optional icon that swaps together with the toggle state

[3] Behavior

Attribute	Example	Description
`data-ozi-toggle-options`	`"slide-time:700;"`	Enables sliding animation with duration in ms