Press "Enter" to skip to content

Onclick Toggle Show Hide Other Div jQuery | jq-collapse.js

jq-collapse.js is an extension for jquery that allows hiding and displaying the content of an element with some data attribute data*, for its implementation, it needs one element to be triggered and another to interact with the movement of changing height or width as the case may be.

what do I need?

The modern browser and jQueryon dependency is its latest version.

javascript showhide div onclick toggle, onclick show div and hide other div, hide and show div using javascript with example, css showhide div on click, onclick show div and hide other div jquery

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.

EventDescription
show.jq.collapseThis event is fired immediately when the method showis invoked.
shown.jq.collapseThis event is fired when a reaction element finishes making it visible including the animation time.
hide.jq.collapseThis event is fired immediately when the method hideis invoked.
hidden.jq.collapseThis event fires when a reaction element finishes hiding including animation time.

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

Official Website(wilnicho): Click Here

This superior jQuery/javascript plugin is developed by wilnicho. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.