Simple Toggle jQuery plugin

For simple toggle effects called via data attributes.

Getting Started


Installation

Download the latest version of Simple Toggle plugin from GitHub and put the following link to the script at the bottom of your markup right after jQuery:

<script src="jquery.simpleToggle.js"></script>

Initialize

Simple example with full required code (HTML tag, selector, library, plugin and initialization):

<button type="button" class="toggle"></button>

<script src="jquery.js"></script>
<script src="jquery.simpleToggle.js"></script>
<script>
    $('.toggle').simpleToggle();
</script>

Usage


no params

Hide clicked element.

<button type="button"
        class="btn btn-default btn-lg toggle">click me</button>

classname

Add or remove one or more classes from clicked element, depending on either the class's presence.

<button type="button"
        class="btn btn-default btn-lg toggle"
        data-toggle-classname="btn-primary">click me 2 times or more</button>

target

Display or hide target element.

<button type="button"
        class="btn btn-default btn-lg toggle"
        data-toggle-target=".target-example-3">click me 2 times or more</button>

<button type="button" disabled="disabled"
        class="btn btn-default btn-lg target-example-3">I am disabled, but I can disappear</button>

classname & target

Add or remove one or more classes from target element.

<button type="button"
        class="btn btn-default btn-lg toggle"
        data-toggle-target=".target-example-4"
        data-toggle-classname="btn-primary">click me 2 times or more</button>

<button type="button" disabled="disabled"
        class="btn btn-default btn-lg target-example-4">I am disabled, but I can change myself</button>

JSON syntax

Previous example in concise format.

<button type="button"
        class="btn btn-default btn-lg toggle"
        data-toggle='{"target":".nbe5", "classname":"btn-primary"}'>click me 2 times or more</button>

<button type="button"
        class="btn btn-default btn-lg nbe5"
        disabled="disabled">I am disabled, but I can change myself</button>

Syntax

Parameter given in data-toggle attribute must have always JSON syntax.

multi target

Thanks to JSON format and items property it is possible to change any number of targets.

<button type="button"
        class="btn btn-default btn-lg toggle"
        data-toggle='{
            "items": [
                {
                    "target":".target-example-6-no-1",
                    "classname":"btn-info"
                },
                {
                    "target":".target-example-6-no-2"
                }
            ]
        }'>click me 2 times or more</button>

<button type="button"
        class="btn btn-default btn-lg target-example-6-no-1"
        disabled="disabled">I can change myself</button>

<button type="button"
        class="btn btn-default btn-lg target-example-6-no-2"
        disabled="disabled">I can disappear</button>

parent

Set target on the parent of clicked element.

<div class="panel-body">
    <button type="button"
        class="btn btn-default btn-lg toggle"
        data-toggle='{"target":"parent", "classname":"bg-blue"}'>click me 2 times or more</button>
</div>