Toggle

Toggle 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!

Usage

Add a button, set a target with .is-hidden class and now you can control the closing and opening of the box.

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-kube="toggle" data-target="#box">Show Me</button>

<div id="box" class="is-hidden">...</div>

Multiple targets

Ok, I'm opened. Now hide me

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

<button data-kube="toggle" data-target="#box-1, #box-2">Toggle</button>

<div id="box-1" class="is-hidden">...</div>
<div id="box-2" class="is-hidden">...</div>

Navbar toggle

Toggle works on mobile devices as well as on desktops. To see Toggle in action for show/hide the navbar, just resize this window or open this page on a mobile device.

<div class="is-navbar-box">
    <div class="is-brand">
        <b>Brand</b>
        <a href="#" class="icon-kube-menu is-shown-mobile"
              data-kube="toggle" data-target="#my-navbar">
        </a>
    </div>
    <div id="my-navbar" class="is-navbar is-hidden-mobile">
        <nav class="is-stacked is-push-right">
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>

Settings

target

Type: String

Default: false

Define DOM selector/selectors which should be displayed when the "open" button is pressed.

<button data-kube="toggle" data-target="#box">Toggle</button>

// target element
<div id="box" class="is-hidden">...</div>

Events

Event	Description
`open`	This event fires immediately when the open instance method is called.
`opened`	This event is fired when the toggle box has been opened, will wait for CSS animation to complete.
`close`	This event fires immediately when the close instance method is called.
`closed`	This event is fired when the toggle box has been closed, will wait for CSS animation to complete.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            toggle: {
                closed: function(sender)
                {
                    console.log('Toggle box is closed.');
                }
            }
        }
    });
})(Kube);

Catch events from a specific toggle

Set an ID for the toggle:

<button id="mytoggle" data-kube="toggle" data-target="#box">Show Me</button>

<div id="box" class="is-hidden">...</div>

Or set data-name attribute:

<button data-name="mytoggle" data-kube="toggle" data-target="#box">Show Me</button>

<div id="box" class="is-hidden">...</div>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            toggle: {
                closed: function(sender)
                {
                    if (sender._id === 'mytoggle')
                    {
                        console.log('Toggle #mytoggle is closed.');
                    }
                }
            }
        }
    });
})(Kube);