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.

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

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

Multiple targets

<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);