How to make use of it:

1. Load the minified model 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 response worth to your toggleable component.

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

3. Create a toggle button to indicate & cover the component.

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

4. Initialize the plugin on the toggle button and carried out.

$(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 or not to persist the present Open/Close state utilizing native 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 format to Horizontal if wanted.

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

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

8. Automatically change the horizontal layout to the vertical layout when the display 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
});

Events

When the elements to be hidden or shown are executed, certain events are triggered, which can be customized.

Toggle Between Hiding And Showing An Element, jq-collapse.js Plugin/Github, toggle hide show jquery, onclick show hide div jquery demo

See Demo And Download