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