Minimal jQuery Spoiler System Plugin - Spoiler

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.