Demo

Toggleme works on mobile devices as well as on desktops. To see Toggleme in action, just resize this window or open this page on a mobile device.

<div class="mi-show-sm">
    <a href="#" data-component="toggleme" data-target="#navbar">Toggle</a>
</div>

<nav id="navbar" class="mi-hide-sm">
    <ul>
        <li><a href="#">...</a></li>
    </ul>
</nav>

Usage

<button data-component="toggleme" data-target="#togglebox-target" data-text="Hide Me">Show Me</button>

<div id="togglebox-target" class="mi-hide">
    ...
</div>

Multiple targets

<button data-component="toggleme" data-target="#togglebox-target-3, #togglebox-target-4" data-text="Hide Me">Show Me</button>

<div id="togglebox-target-3" class="mi-hide">
    ...
</div>

<div id="togglebox-target-4" class="mi-hide">
    ...
</div>

Settings

target

• Type: string
• Default: null
• Possible values: selector/selectors

Defines which layer or layers should be displayed upon clicking the "open" button.

<button data-component="toggleme" data-target="#togglebox-target">Show Me</button>

<button data-component="toggleme" data-target="#togglebox-target-1, #togglebox-target-2">Show Me</button>

<button data-component="toggleme" data-target=".togglebox-target">Show Me</button>

text

• Type: string
• Default: ''

Defines what text should a button have after the layer has been opened. If not set, button text will not change.

<button data-component="toggleme" data-target="#togglebox-target" data-text="Hide Me">Show Me</button>

Callbacks

open

$('#togglebox-target').on('open.toggleme', function()
{
    // do something...
});

opened

$('#togglebox-target').on('opened.toggleme', function()
{
    // do something...
});

close

$('#togglebox-target').on('close.toggleme', function()
{
    // do something...
});

closed

$('#togglebox-target').on('closed.toggleme', function()
{
    // do something...
});

API

toggle

$('#togglebox-target').toggleme('toggle');

open

$('#togglebox-target').toggleme('open');

close

$('#togglebox-target').toggleme('close');

isOpened

var isOpened = $('#togglebox-target').toggleme('isOpened');

isClosed

var isClosed = $('#togglebox-target').toggleme('isClosed');

destroy

$('#togglebox-target').toggleme('destroy');