Easy Show/Hide/Toggle Plugin - jQuery Autohide.js

A lightweight, flexible, multipurpose jQuery content reveal (show/hide/toggle) plugin that allows you to manage the display visibility of any HTML element easily.

Can be used for spoilers, tabs, tooltips, popovers, dropdowns, mega menus, etc.

How to use it:

1. Get started by loading the jquery.autohide.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.autohide.js"></script>

2. Enable a trigger element to toggle a popover.

<span id="example">
  Click Me
  <div class="popover-content" id="popover">
    <p>Your Content Here</p>
  </div>
</span>

/* example CSS */
.popover-content {
  display: none;
  position: absolute;
  width: 300px;
  padding: 1em;
  background-color: #fff;
  border: 1px solid #666;
  z-index: 9;
}

$('#example').autohide_timeout({
  $target: $('#popover-content')
});

3. Use the plugin to create a dropdown menu from a nested list.

<ul id="example">
  <li class="has-children">
    <a href="#">Menu 1</a>
    <ul class="is-children">
      <li><a href="#">Menu 1.1</a></li>
      <li><a href="#">Menu 1.2</a></li>
      <li><a href="#">Menu 1.3</a></li>
    </ul>
  </li>
  <li class="has-children">
    <a href="#">Menu 2</a>
    <ul class="is-children">
      <li><a href="#">Menu 2.1</a></li>
      <li><a href="#">Menu 2.2</a></li>
      <li><a href="#">Menu 2.3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 3</a>
  </li>
</ul>

/* example CSS */
ul#example {
  padding: 0;
}

ul#example > li {
  position: relative;
  float: left;
  margin-right: 20px;
}

ul#example > li > ul {
  display: none;
  width: 160px;
  position: absolute;
  padding: 20px;
  background-color: pink;
  z-index: 3;
}

ul#example > li > ul.submenu-opened {
  display: block;
}

var $dropMenu = $('#example');
$dropMenu.autohide_timeout({
  $source: function( $el ) {
    return $el.find('> li > a');
  },
  $target: function( $source ) {
    return $source.next('ul.is-children');
  },
  onEvents: function( $source, $target, event ) {
    $dropMenu.find('.submenu-opened').removeClass('submenu-opened');
    $target.addClass('submenu-opened');
  },
  onTimeout: function( $source, $target, event ) {
    $dropMenu.find('.submenu-opened').removeClass('submenu-opened');
  }
});

4. Customize the trigger events. Default: 'click'.

$('#example').autohide_timeout({
  events: 'click mouseenter',
});

5. Set the time to wait before hiding the element. Default: 1500.

$('#example').autohide_timeout({
  timeout: 2000,
});

---

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