Toggle Between Hiding And Showing An Element - jq-collapse.js

A jQuery content toggle plugin that allows hiding and showing of an element with smooth fade/slide transitions.

Similar to the <details> details disclosure element but more practical, flexible and fancy.

How to use it:

1. Load the minified version of the jq-collapse.js plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/js/jq-collapse.min.js"></script>

2. Assign a reaction value to your toggleable element.

<div data-jqcollapse-reaction="1">
  Content To Show/Hide
</div>

3. Create a toggle button to show & hide the element.

<button 
  id="example" 
  data-jqcollapse-action="1">
  Toggle Button
</button>

4. Initialize the plugin on the toggle button and done.

$(function(){
  $('#example').jq_collapse();
});

5. Enable slide & fade transitions.

<button 
  id="example" 
  data-jqcollapse-action="1"
  data-jqcollapse-slide="true"
  data-jqcollapse-fade="true"
  data-jqcollapse-time="1">
  Toggle Button
</button>

// or
$('#example').jq_collapse({
  slide: true,
  fade: true,
  time: 1 // animation speed
});

6. Determine whether to persist the current Open/Close state using local or session storage.

<button 
  id="example" 
  data-jqcollapse-action="1"
  data-jqcollapse-slide="true"
  data-jqcollapse-fade="true"
  data-jqcollapse-time="1">
  Toggle Button
</button>

// or
$('#example').jq_collapse({
  save: true,
  storage: 'session' // or 'local'
});

7. Set the layout to Horizontal if needed.

<button 
  id="example" 
  data-jqcollapse-type="horizontal"
  data-jqcollapse-size="200">
  Toggle Button
</button>

// or
$('#example').jq_collapse({
  type: 'horizontal',
  size: 200
});

8. Automatically switch the horizontal layout to the vertical layout when the screen size is small than 768px.

$('#example').jq_collapse({
  responsive: true,
  media: 768,
});

9. Event handlers.

$('#example').on('show.jq.collapse', function () {
  // do something
});

$('#example').on('shown.jq.collapse', function () {
  // do something
});

$('#example').on('hide.jq.collapse', function () {
  // do something
});

$('#example').on('hidden.jq.collapse', function () {
  // do something
});

---

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