Basic behaviours for togglable elements in a WebPage.

jsk-togglable is not actively maintained anymore (bugfixes may still be released).
Last updated 8 years ago by killdream .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install jsk-togglable 
SYNC missed versions from official npm registry.


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

Current Tags

  • 0.2.2                                ...           latest (8 years ago)

10 Versions

  • 0.2.2 [deprecated]           ...           8 years ago
  • 0.2.1 [deprecated]           ...           8 years ago
  • 0.2.0 [deprecated]           ...           8 years ago
  • 0.1.6 [deprecated]           ...           8 years ago
  • 0.1.5 [deprecated]           ...           8 years ago
  • 0.1.4 [deprecated]           ...           8 years ago
  • 0.1.3 [deprecated]           ...           8 years ago
  • 0.1.2 [deprecated]           ...           8 years ago
  • 0.1.1 [deprecated]           ...           8 years ago
  • 0.1.0 [deprecated]           ...           8 years ago
Maintainers (1)
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
  • ekho >=0.3.0 || <1.0.0
  • doom >=0.4.0 || <1.0.0
Dev Dependencies (1)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |