toggle

    1.0.1 • Public • Published

    toggle Build Status

    A tiny toggle library powered by jQuery and data attributes.

    Install

    $ npm install --save toggle
    

    And add the following to a JavaScript somewhere:

    require('toggle');

    Usage

    The library is powered by data attributes. You have toggle targets, and toggle controls: when a toggle control is clicked, the toggle targets will have their visibility changed.

    To create a toggle target, give it a data-toggle-name attribute:

    <p data-toggle-name="foobar">This will be toggled.</p>

    Then, to create a toggle control to toggle the visiblity of that element, give an element a data-toggle-target attribute:

    <a data-toggle-target="foobar">Toggle visiblity</a>

    You can also prepend show: and hide: to the target to show and hide it:

    <a data-toggle-target="show:foobar">Show foobar</a>
    <a data-toggle-target="hide:foobar">Hide foobar</a>

    If you want to be really verbose, you can use toggle: for targets to be toggled. You can specify multiple targets by separating them with a space:

    <a data-toggle-target="one two show:three hide:four">Show and hide some stuff</a>

    Changing how things are toggled

    These are the default toggle handlers:

    var toggles = module.exports = {
        toggle: function ($element) {
            $element.toggle();
        },
        hide: function ($element) {
            $element.hide();
        },
        show: function ($element) {
            $element.show();
        }
    };

    Sometimes that isn't suitable, e.g. if you want to remove a "hidden" class. You can override them by require-ing the module and adjusting the handlers:

    var toggle = require('toggle');
     
    toggle.toggle = function ($element) {
        $element.toggleClass('hidden');
    };
     
    toggle.hide = function ($element) {
        $element.addClass('hidden');
    };
     
    toggle.show = function ($element) {
        $element.removeClass('hidden');
    };

    Note that this will change the handlers everywhere in your project. You're using classes consistently though, right?

    License

    This library is released under the MIT license.

    Keywords

    Install

    npm i toggle

    DownloadsWeekly Downloads

    19

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • callumacrae