Toggles

Toggles

A toggle is a single collapsible block: a clickable header that slides its content open and shut. Toggles are independent (unlike accordions, opening one does not close another), which makes them ideal for standalone FAQ items or expandable detail panels.

Structure

• .toggle: the wrapper.
• .toggle-header: the clickable bar.
• .toggle-icon with .toggle-closed and .toggle-open icons that swap based on state.
• .toggle-title: the header label.
• .toggle-content: the collapsible body.

<div class="toggle">
    <div class="toggle-header">
        <div class="toggle-icon">
            <i class="toggle-closed uil uil-plus"></i>
            <i class="toggle-open uil uil-minus"></i>
        </div>
        <div class="toggle-title">
            How do I become an author?
        </div>
    </div>
    <div class="toggle-content toggle-content-padding">
        Becoming a Canvas author starts with a free ThemeForest account and a quick application form.
    </div>
</div>

Key Attributes

• data-state: set to open to render the toggle already expanded on load. Any other value (or omitted) starts closed.
• data-speed: slide animation speed in milliseconds. Default: 300. Non-numeric jQuery keywords like slow are also accepted.

Open by Default

<div class="toggle" data-state="open" data-speed="400">
    <div class="toggle-header">
        <div class="toggle-icon">
            <i class="toggle-closed uil uil-plus"></i>
            <i class="toggle-open uil uil-minus"></i>
        </div>
        <div class="toggle-title">Already expanded</div>
    </div>
    <div class="toggle-content toggle-content-padding">
        This panel is open when the page loads.
    </div>
</div>

State Class

When open, the plugin adds toggle-active to the .toggle. The paired icons (toggle-closed shown when collapsed, toggle-open shown when expanded) are switched by CSS based on this active state, so you can use any icon set (Unicons uil, Bootstrap Icons bi, and so on).

Alternate Icons

Swap the plus/minus for a check/cross pair:

<div class="toggle-icon">
    <i class="toggle-closed bi-check-circle-fill"></i>
    <i class="toggle-open bi-x-circle"></i>
</div>

Tips

• Add toggle-content-padding to the content for comfortable inner spacing.
• Use mb-0 on stacked toggles to control the gap between them.
• Toggles are single-item. For a group where opening one closes the rest, use the Accordions shortcode instead.