Minimal jQuery Spoiler System Plugin - Spoiler

Minimal jQuery Spoiler System Plugin - Spoiler
File Size: 8.61 KB
Views Total: 1295
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Spoiler is an ultra-light and easy-to-use jQuery spoiler plugin which allows you to show/hide html elements with custom trigger events.

How to use it:

1. Insert content to be spoilered into a container element.

<div class="spoiler"><p>Your Content Goes Here</p></div>

2. Include jQuery library and the jQuery spoiler plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.spoiler.js"></script>

3. Initialize the plugin with default options on the container element you just created.

jQuery(".spoiler").spoiler();

4. All the options available.

  • buttonName   : "Spoiler": Label for each show/hide button.
  • buttonClass  : "btn-spoiler": The class each show/hide button belongs to.
  • paddingValue : 6: Adds a specified amount of padding to the bottom of spoilered content.
  • triggerEvents: false: When enabled, events are fired upon completion of spoilered content being shown and hidden. Listen to them using jQuery.on().
  • includePadding     : true: Disables the paddingValue option.
  • buttonActiveName   : "Spoiler": If different than buttonName, specified text will be used as the button label for the currently visible content.
  • buttonActiveClass  : "btn-spoiler-active": When spoilered content has been revealed, the button clicked is assigned to this class to indicate the spoiler has been activated. 
  • spoilerVisibleClass: "spoiler-visible": When spoilered content has been revealed, the content now shown is assigned to this class to indicate the content is visible. 

4. Style the show/hide button and spoilered content in the CSS.

.spoiler {
  ...
}

.btn-spoiler {
  ...
}

.btn-spoiler p {
  ...
}

.btn-spoiler-active {
  ...
}

.btn-spoiler-active p {
  ...
}

Change logs:

2014-11-12

  • v1.3

2014-09-10

  • v1.2.1

2014-09-07

  • v1.2.0

 


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