Customizable Content Toggle Plugin For jQuery - Elevator

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.

<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="jquery.tcg-elevator.css">
<script src="jquery.tcg-elevator.min.js"></script>

2. Create toggleable content and toggle control as follows:

<div class="tcg-elevator">
  <div class="tcg-elevator-toggle">
    <h3>Click me</h3>
  </div>
  <div class="tcg-elevator-content">
    Main Content Goes Here
  </div>
</div>

3. Call the function on the top container to active the plugin.

$('.tcg-elevator').tcgElevator();

4. Change the default animation speeds.

$('.tcg-elevator').tcgElevator({
  speed: 400,
  openingSpeed: false,
  closingSpeed: false,
});

5. Change the default CSS classes.

$('.tcg-elevator').tcgElevator({
  toggleSelector: '.tcg-elevator-toggle',
  contentSelector: '.tcg-elevator-content',
  openClass: 'tcg-elevator-open',
  openingClass: 'tcg-elevator-opening',
  closingClass: 'tcg-elevator-closing'
});

6. You can also create a button to toggle all the toggleable content:

var closed = true;
$('.toggle-button').click(function(e){
  var functionToCall = closed ? 'open' : 'close';
  closed = !closed;
  $('.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.