[unmaintained] Basic behaviours for togglable elements in a WebPage.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



JumperSkirt's Togglable provides the basic behaviours for elements that must alternatively be hidden or shown in a page.


A togglable element can be either an anchor with href=#jsk::<element-id> or any other element with the attribute data-jsk-target=<element-id>:

<div class="content">
  <a href="#jsk::info">Show info()</a>
  <div id="info">Some stuff here</div>
  <span data-jsk-target="win">Show window()</span>
  <div id="win">Some window here</div>

Then instantiate the jsk-togglable library (you can pass a selector engine and an event bridge if you're supporting older browsers), and run the processor on a top level element containing the anchors:

var jskTogglable = require('jsk-togglable')(Sizzle)

Requirements and supported platforms

This library makes use of a safely shim-able subset of ECMAScript 5 features. If you need to support older browsers, you'll have to include the es5-shim library.


If you're using Browserify — you really should! — to manage your dependencies, just grab it from NPM:

$ npm install -d jsk-togglable

Otherwise, download the latest release and include both the Browserify prelude and the Togglable library in your page:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Ur Awesome Stuff</title>
    {{ Lots of stuff might go here }}
    <script src="/path/to/browserify.js"></script>
    <script src="/path/to/jsk-togglable.js"></script>

In any of the cases above, Togglable will be a require-able module in your platform, so you can just use require("jsk-togglable") to instantiate it.


If you want to build stuff from the source, you'll need LiveScript. Once you've got that installed and Slake on your path, just run:

$ git clone git:/github.com/killdream/jsk-togglable.git  # Download the project
$ cd jsk-togglable                                       # Move to the project folder
$ npm install -d                                         # Initialise the dependencies
$ slake build:all                                        # Runs the build tasks


For building the test files, you can use slake test. For building them continuously, use slake test:continuous.


Togglable is licensed under the delicious and permissive MIT licence. You can happily copy, share, modify, sell or whatever — refer to the actual licence text for less information:

$ less LICENCE.txt