Skip to content
It's jQuery plugin for simple toggle effects called via data attributes.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
LICENSE.md
README.md
jquery.simpleToggle.js

README.md

Simple Toggle

Simple Toggle is jQuery plugin for toggle effects called via data attributes.

Getting Started

Installation

Put the script at the bottom of your markup right after jQuery:

<script src="jquery.js"></script>
<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>

Example of usage

classname

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

<button type="button" class="toggle" data-toggle-classname="toggle-classname">click me</button>

target

Display or hide target element.

<button type="button" class="toggle" data-toggle-target=".target">click me</button>
<div class="target">Target element</div>

JSON syntax

Previous example in concise format.

<button type="button" class="toggle" data-toggle='{"target":".target", "classname":"toggle-classname"}'>click me</button>
<div class="target">Target element</div>

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="toggle"
        data-toggle='{
            "items": [
                {
                    "target":".target-1",
                    "classname":"toggle-classname"
                },
                {
                    "target":".target-2"
                }
            ]
        }'>click me</button>
<div class="target-1">Target element #1</div>
<div class="target-2">Target element #2</div>

More live examples available on http://example.silversite.pl/simple-toggle/

License

Code released under the MIT license.

You can’t perform that action at this time.