Toggle CSS Class When Clicking Outside Of An Element – clickout

Preview:

Description:

clickout is a pure JS library which detects the Click Outside event and removes a CSS class from a given element when you click outside of the element.

See also:

• Detecting Click Outside Of A DOM Element – when-clicked-outside
• Handling Click Outside Event In Pure JavaScript – click-outside.js
• Handling outside Event With jQuery – onOut
• Simple jQuery Click outside Plugin – clickout.js

How to use it:

Download and insert the JavaScript file clickout.js into the document.

<script src="/path/to/clickout.js"></script>

Initialize the library on the target element and specify the CSS class to remove when clicking outside.

<div class="is-active js-clickout">
  Element
</div>

var clickout = new clickOut.default({
    className: '.js-clickout',
    activeClass: 'is-active', // class to remove
});

Execute a callback function after you click outside of the element.

var clickout = new clickOut.default({
    after: function(elements) {
      console.log(elements);
    }
});