Click to activate (jQuery)

Click to activate (jQuery).markdown

Click to activate (jQuery)

Simple click to activate demo with jQuery. Allows the user to click the element to toggle it on or off, or click anywhere to deactivate.

Using "Excluded Areas" to allow user interaction with the revealed content.

A Pen by Trey Kane on CodePen.

License.

index.html

<div class="tile">
  <div class="tile-top">Clickable</div>
  <div class="tile-bottom">Not Clickable</div>
</div><!-- / .tile -->

required scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

script.js

$( document ).ready(function() {
 
  $(function() { // TOGGLE CLASS ON ELEMENT
    $(".tile-top").on("click", function() { 
      $(this).toggleClass('active'); });
  }); //END TOGGLE CLASS
  
  $(function() {  // REMOVE CLASS WHEN YOU CLICK, EXCLUDE ELEMENTS
    var ignore= Array(".tile-top", // elements to ignore
                      ".tile-bottom");
    ignore.forEach(function (item) { // loop through ignore array
      $(item).click(function(){ return false; }); // ignore item
    });
    $(document).on("click", function() { // remove class when you click anywhere else
      $(".tile-top").removeClass('active'); });
  });// END REMOVE CLASS
   
});

style.scss

body {
  background-color: #333;
}

.tile {
  height: 10em;
  margin: 2em auto;
  position: relative;
  width: 10em;
  .tile-top {
    background-color: white;
    border-radius: .5em;
    height: 10em;
    position: absolute;
    overflow: hidden;
    width: 10em;
    z-index: 2;
    &.active {
      top: 105%;
    } // &.active
  } // .tile-top
  .tile-bottom {
    background-color: red;
    border-radius: .5em;
    height: 10em;
    position: absolute;
    overflow: hidden;
    width: 10em;
    z-index: 1;
  } // .tile-bottom
} // .tile