README
toggler
Usage
- Import script toggler.js
- Import script classic
<script src="js/toggler.js"></script>
- Import script ES6
import toggler from 'js-toggler
- Import script classic
- Call function
togglers
when document is ready
$(function () {
togglers.init();
});
- Mark your html buttons with class
JS_toggler
, a unique id string or numberdata-toggler-id="1"
and name a group for themdata-toggler-group="tab-item"
. Only one or many.
<ul>
<li><a data-toggler-id="1" data-toggler-group="tab-item" class="JS_toggler active">btn 1</a></li>
<li><a data-toggler-id="2" data-toggler-group="tab-item" class="JS_toggler">btn 2</a></li>
<li><a data-toggler-id="3" data-toggler-group="tab-item" class="JS_toggler">btn 3</a></li>
<li><a data-toggler-id="4" data-toggler-group="tab-item" class="JS_toggler">btn 4</a></li>
<li><a data-toggler-id="5" data-toggler-group="tab-item" class="JS_toggler">btn 5</a></li>
</ul>
- These buttons are linked to your content divs with attribute
data-toggler-itemid="1"
. One content div or many.
<div data-toggler-itemid="1" data-toggler-group="tab-item" class="JS_item_toggler active">
tab content 1
</div>
<div data-toggler-itemid="2" data-toggler-group="tab-item" class="JS_item_toggler">
tab content 2
</div>
...
- Use your own css to style
.active
elements !
Events / callback
Your html content can listen to events open.content
and close.content
Example :
$('.JS_item_toggler').on('open.content', function () {
dosomething();
});
Todo
Documentation
- events
Examples :
- layers
Version update
1.1
- Bring params to change css class and events