This time I will share jQuery Plugin and tutorial about Customizable Content Toggle Plugin For jQuery – Elevator, hope it will help you in programming stack.
Elevator is a jQuery content toggle plugin which enables the user to expand, collapse or toggle sections of content just like an accordion interface.
How to use it:
1. To use this plugin, you need to load the jQuery Elevator plugin’s JS and CSS files in the webpage which has jQuery library loaded.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<link rel="stylesheet" href="jquery.tcg-elevator.css"> |
3 |
<script src="jquery.tcg-elevator.min.js"></script> |
2. Create toggleable content and toggle control as follows:
1 |
<div class="tcg-elevator"> |
2 |
<div class="tcg-elevator-toggle"> |
5 |
<div class="tcg-elevator-content"> |
3. Call the function on the top container to active the plugin.
1 |
$('.tcg-elevator').tcgElevator(); |
4. Change the default animation speeds.
1 |
$('.tcg-elevator').tcgElevator({ |
5. Change the default CSS classes.
1 |
$('.tcg-elevator').tcgElevator({ |
2 |
toggleSelector: '.tcg-elevator-toggle', |
3 |
contentSelector: '.tcg-elevator-content', |
4 |
openClass: 'tcg-elevator-open', |
5 |
openingClass: 'tcg-elevator-opening', |
6 |
closingClass: 'tcg-elevator-closing' |
6. You can also create a button to toggle all the toggleable content:
2 |
$('.toggle-button').click(function(e){ |
3 |
var functionToCall = closed ? 'open' : 'close'; |
5 |
$('.tcg-elevator').tcgElevator(functionToCall); |
This awesome jQuery plugin is developed by thecodegecko. For more Advanced Usages, please check the demo page or visit the official website.
