Toggler

Simple javascript plugin for toggling element (suitable for accordion or tabs)

View on Github

Install

<link rel="stylesheet" href="css/toggler.css" />

<script src="js/toggler.js">
<script>

    Toggler.Init();

</script>

Config

Toggler.Init({

    CLASS_BASE: 'js-toggler',

    CLASS_VISIBLE: 'is-visible',

    CLASS_TARGET_VISIBLE: 'is-target-visible',

    CLASS_TRANSITIONING: 'is-transitioning',

    CLASS_FADE: 'is-fade',

    CLASS_SLIDEFADE: 'is-slidefade',

    DELEGATE_CLICK: false

});

Test

Test
Labore, dolor nostrum atque iste ut distinctio laboriosam? 

Alias voluptatibus, 

natus repellendus, 

odit sapiente sequi dolor commodi veritatis perspiciatis dignissimos voluptatem, 

doloribus deserunt incidunt!

Basic

Toggle Show Hide

<a class="btn" data-toggler="toggle" href="#demo1">Toggle</a>

<a class="btn" data-toggler="show" href="#demo1">Show</a>

<a class="btn" data-toggler="hide" href="#demo1">Hide</a>



<div class="js-toggler" id="demo1">

Basic using [data-toggler-target]

Show Hide

<button class="btn btn-primary" data-toggler="toggle" data-toggler-target="#demo2">Toggle</button>

<a class="btn" data-toggler="show" data-toggler-target="#demo2" href="#">Show</a>

<a class="btn" data-toggler="hide" data-toggler-target="#demo2">Hide</a>



<div class="js-toggler" id="demo2"></div>

Visible at start

Toggle Show Hide

<a class="btn" data-toggler="toggle" href="#demo3">Toggle</a>

<a class="btn" data-toggler="show" href="#demo3">Show</a>

<a class="btn" data-toggler="hide" href="#demo3">Hide</a>



<div class="js-toggler is-visible" id="demo3"></div>

Multiple targets

Toggle (.demo4) Toggle (#demo4b, #demo4c) Toggle Toggle

<a class="btn btn-primary" data-toggler="toggle" data-toggler-target=".demo4" href="#">Toggle</a>

<a class="btn btn-primary" data-toggler="toggle" data-toggler-target="#demo4a, #demo4b, #demo4c" href="#">Toggle</a>



<div class="js-toggler is-visible demo4" id="demo4a"></div>

<div class="js-toggler is-visible demo4" id="demo4b"></div>

<div class="js-toggler is-visible demo4" id="demo4c"></div>
<a class="btn btn-danger" data-toggler="toggle" 

        data-toggler-target="#demo4b" href="#">Toggle</a>
<a class="btn btn-info" data-toggler="toggle" 

        data-toggler-target="#demo4c" href="#">Toggle</a>

Accordion (data-toggler-collection)

<a data-toggler="toggle" data-toggler-target="#demo5a" data-toggler-collection="#accordion" href="#">Lorem ipsum dolor sit amet.</a>

<div class="js-toggler is-visible" id="demo5a"></div>
<a data-toggler="toggle" data-toggler-target="#demo5b" data-toggler-collection="#accordion" href="#">Lorem ipsum dolor sit amet.</a>

<div class="js-toggler" id="demo5b"></div>
<a data-toggler="toggle" data-toggler-target="#demo5c" data-toggler-collection="#accordion" href="#">Lorem ipsum dolor sit amet.</a>

<div class="js-toggler" id="demo5c"></div>
<a data-toggler="toggle" data-toggler-target="#demo5d" data-toggler-collection="#accordion" href="#">Lorem ipsum dolor sit amet.</a>

<div class="js-toggler" id="demo5d"></div>

Tabs

<a href="#demo6a" data-toggler="tab" data-toggler-collection="#tabs">Lorem.</a>

<a href="#demo6b" data-toggler="tab" data-toggler-collection="#tabs">Molestias!</a>

<a href="#demo6c" data-toggler="tab" data-toggler-collection="#tabs">Doloribus.</a>

<a href="#demo6d" data-toggler="tab" data-toggler-collection="#tabs">Perferendis.</a>

<div class="js-toggler is-fade is-visible" id="demo6a"></div>

<div class="js-toggler is-fade" id="demo6b"></div>

<div class="js-toggler is-fade" id="demo6c"></div>

<div class="js-toggler is-fade" id="demo6d"></div>
<a href="#demo6a" data-toggler="tab" data-toggler-collection="#tabs">Lorem.</a>

<a href="#demo6b" data-toggler="tab" data-toggler-collection="#tabs">Molestias!</a>

<a href="#demo6c" data-toggler="tab" data-toggler-collection="#tabs">Doloribus.</a>

<a href="#demo6d" data-toggler="tab" data-toggler-collection="#tabs">Perferendis.</a>

<div class="js-toggler is-fade is-visible" id="demo6a"></div>

<div class="js-toggler is-fade" id="demo6b"></div>

<div class="js-toggler is-fade" id="demo6c"></div>

<div class="js-toggler is-fade" id="demo6d"></div>



Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

Delectus cumque reiciendis esse, aut dolores? 

Illo libero, fuga distinctio molestiae dolores.
<a href="#demo6a" data-toggler="tab" data-toggler-collection="#tabs">Lorem.</a>

<a href="#demo6b" data-toggler="tab" data-toggler-collection="#tabs">Molestias!</a>

<a href="#demo6c" data-toggler="tab" data-toggler-collection="#tabs">Doloribus.</a>

<a href="#demo6d" data-toggler="tab" data-toggler-collection="#tabs">Perferendis.</a>

<div class="js-toggler is-fade is-visible" id="demo6a"></div>

<div class="js-toggler is-fade" id="demo6b"></div>

<div class="js-toggler is-fade" id="demo6c"></div>

<div class="js-toggler is-fade" id="demo6d"></div>

Lorem ipsum dolor sit amet.
<a href="#demo6a" data-toggler="tab" data-toggler-collection="#tabs">Lorem.</a>

<a href="#demo6b" data-toggler="tab" data-toggler-collection="#tabs">Molestias!</a>

<a href="#demo6c" data-toggler="tab" data-toggler-collection="#tabs">Doloribus.</a>

<a href="#demo6d" data-toggler="tab" data-toggler-collection="#tabs">Perferendis.</a>

<div class="js-toggler is-fade is-visible" id="demo6a"></div>

<div class="js-toggler is-fade" id="demo6b"></div>

<div class="js-toggler is-fade" id="demo6c"></div>

<div class="js-toggler is-fade" id="demo6d"></div>



Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Consectetur reprehenderit magnam ipsam ex illo doloremque quia maiores voluptatem itaque.

Dolorem necessitatibus minus totam odio nisi sit quis perferendis. Rem, accusantium!

Repellat ea magni natus id eius odit libero officiis quis reprehenderit alias esse voluptas fuga pariatur consequatur.

Animi minus ipsam adipisci blanditiis.

Animations

Toggle slide (default) Toggle fade Toggle slide fade Toggle all

<a class="btn btn-primary" data-toggler="toggle" data-toggler-target="#demo7a" href="#">Toggle slide (default)</a>

                        

<div class="js-toggler is-visible demo7" id="demo7a"></div>
<a class="btn btn-danger" data-toggler="toggle" data-toggler-target="#demo7b" href="#">Toggle fade</a>



<div class="js-toggler is-fade is-visible is-fade demo7" id="demo7b"></div>
<a class="btn btn-info" data-toggler="toggle" data-toggler-target="#demo7c" href="#">Toggle slide fade</a>



<div class="js-toggler is-slidefade is-visible is-slidefade demo7" id="demo7c"></div>

Force no animation

Toggle Show Hide Force toggle Force show Force hide

<a class="btn" data-toggler="toggle" href="#demo3">Toggle</a>

<a class="btn" data-toggler="show" href="#demo3">Show</a>

<a class="btn" data-toggler="hide" href="#demo3">Hide</a>



<div class="js-toggler is-visible" id="demo3"></div>