Toggleme

Toggleme is a great way to add a binary option to either display some content or hide it. It works like a charm for menus, disclaimers and so much more!.

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.

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

<nav id=“navbar” class=“hide-sm”>
<ul>
<li><a href="#">…</a></li>
</ul>
</nav>

Usage

Ok, I'm opened. Now hide me

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

<div id=“togglebox-target” class=“hide”>
…
</div>

Multiple targets

Ok, I'm opened. Now hide me

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

... and, I'm opened too. Now hide me

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

<div id=“togglebox-target-1” class=“hide”>
…
</div>


<div id=“togglebox-target-2” class=“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');