Customizable Content Toggle Plugin For jQuery - Elevator

File Size: 7.22 KB
Views Total: 1866
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 class="tcg-elevator-content">
    Main Content Goes Here

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


4. Change the default animation speeds.

  speed: 400,
  openingSpeed: false,
  closingSpeed: false,

5. Change the default CSS classes.

  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;
  var functionToCall = closed ? 'open' : 'close';
  closed = !closed;

This awesome jQuery plugin is developed by thecodegecko. For more Advanced Usages, please check the demo page or visit the official website.