HOT (Hiding Object Tools)

jQuery plugin for showing/hiding elements modern ways

by 8ogdan

HTML

<button class="btn js-box-show">
  TOGGLE TOOL
</button>

<button class="js-overlay-show">
  TOGGLE-OVERLAY TOOL
</button>

<button class="btn js-next-show">
  TOGGLE-NEXT TOOL
</button>

<div class="box box-hidden">
  Hi I'm box and I will show you some magic trick!
  <br> TOGGLE-NEXT
</div>

<div class="box js-box-hidden">
  Hi I'm box and I will show you some magic trick!
  <br> TOGGLE
</div>

<div class="box-overlay js-overlay-hidden">
  Hi I'm box and I will show you some magic trick!
  <br> TOGGLE-OVERLAY
  <button class="js-close">
    Close
  </button>
</div>

CSS

body {
  text-align: center;
}

.btn {
  margin: 0 15px;
}

.box {
  width: 100%;
  height: 56px;
  padding: 60px 0;
  background: black;
  color: #fff;
  margin-top: 50px;
  display: none;
}

.box-overlay {
  position: fixed;
  background: #fff;
  width: 300px;
  height: 56px;
  padding: 60px 30px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  display: none;
}

.box-overlay button {
  position: absolute;
  right: 15px;
  top: 15px;
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
  display: none;
}

JavaScript

/**
 * jquery.hot.js (Hiding Object Tools)
 * Author & copyright (c) 2015: Adam Laita
 * GPL license
 *
 * Website: http://www.laita.cz/
 * Examples: https://jsfiddle.net/TheAL/toabazqp/
 *
 * jQuery plugin for showing/hiding elements modern ways
 * Requires jQuery version 1.10 or above
 *
 * Parameters:
 * toggle - (clickPointer, hiddenObject, effectIn, effectOut)
 * toggleOverlay - (clickPointer, hiddenObject, effectIn, effectOut)
 * toggleAssigned - (clickPointer, hiddenObject, effectIn, effectOut)
 * toggleNext - (clickPointer, effect)
 * toggleParentNext - (clickPointer, effect)
 */

(function(window, document, $) {
  var HOT = {

    /* ------------------------------ TOGGLE ------------------------------ */

    // shows/hides hiddenObject and apply 3 ways of closing
    toggle: function(clickPointer, hiddenObject, effectIn, effectOut) {

      // shows/hides hiddenObject and toggle classes
      $(clickPointer).on('click touchstart', function(e) {
        e.preventDefault();
        e.stopPropagation();

        if ($(this).hasClass('active')) {
          // closes current open elements and inactive clicked button
          $(this).removeClass('active');
          $(hiddenObject)[effectOut](500);
          $(hiddenObject).removeClass('opened');
        } else {
          // closes every open elements and removes active class from buttons
          $('.active').removeClass('active');
          $('.opened').fadeOut(500);
          $('.opened').removeClass('opened');

          // activates clicked button and open assigned element
          $(this).addClass('active');
          $(hiddenObject).addClass('opened');
          $(hiddenObject)[effectIn](500);
        }
      });

      // hides hiddenObject by clicking outside of it and remove active class
      $(document).on('click touchstart', function(e) {
        if (($(e.target).closest($(hiddenObject)).length === 0) && ($(e.target).closest($(clickPointer)).length === 0) &&...