Trigger Events Based On Visibility - jQuery hideShow.js

File Size: 4.68 KB
Views Total: 1586
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Trigger Events Based On Visibility - jQuery hideShow.js

hideShow.js is a small yet sometimes useful jQuery plugin to fire events when a specific element is hidden or visible in the web page.

See also:

How to use it:

1. To use this plugin, first you need to load the hideShow.js script after jQuery library.

<script src="" 
<script src="hideshow.min.js"></script>

2. Initialize the plugin and done.

<div id="test_hidden" style="display: none;">
  <h3>This div will fire hidden shown events.</h3>

3. Trigger a function when the visibility status is changed.

$("#test_hidden").on("visibilityChanged", function(event, visibility){
  alert("Element " + visibility)

4. More usages.


$("#test_hidden").hideShow().on("visibilityChanged", function(event,visibility){
$("#test_hidden").hideShow(function(e, visibility){
  alert("Element " + visibility)

$("#test_hidden").hideShow(function(e, visibility){
  console.log(e, visibility);

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