Toggle Elements Depending On Hash Links - hashToggle

hashToggle is a tiny jQuery plugin that enables anchor links (hash links) to toggle their correspondent elements using custom JavaScript events like click, hover, etc.

How to use it:

1. Include both jQuery library and the hashToggle plugin on the webpage.

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

2. Create an anchor link pointing to an element to be toggled.

<a href="#example">Click Me</a>
<div id="example">Click Me DIV</div>

3. Initialize the plugin on the anchor link and done.

$("[href='#example']").hashToggle({
  // options here
});

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

$("[href='#example']").hashToggle({
  event: "mouseenter mouseleave focusin focusout"
});

5. Customize the toggle animation. Default: 'toggle'. Refer to jQuery Effects for more animation.

$("[href='#example']").hashToggle({
  action: "slideToggle",
  // duration
  duration: 300,
  // whether to use stop() method
  animateStop: true
});

6. Customize the toggle animation. Default: 'toggle'. Refer to jQuery Effects for more animation.

$("[href='#example']").hashToggle({
  action: "slideToggle",
  // duration
  duration: 300,
  // whether to use stop() method
  animateStop: true
});

7. Toggle CSS classes of the DIV element based on the toggle state. Default: null.

$("[href='#example']").hashToggle({
  toggleClass: "active",
  addClass: "on",
  removeClass: "off"
});

8. Trigger a function after the toggle animation has finished.

$("[href='#example']").hashToggle({
  afterEvent: function(event) {
    // do something
  }
});

Changelog:

2021-01-03

• JS updated

---

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