title: onclick div trigger open overlay
body: <p>I'm using a overlay tutorial by codrops can be found <a href="http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/" rel="nofollow">here</a>. the person who made the tutorial used " trigger-overlay " ID on a button to trigger the overlay.</p>
  
  <p>I'm trying to make the overlay trigger with a div with same id ( the id selector is used only once ) as mentioned there are no multiple instances of the id used.</p>
  
  <p>I have given the div on hover cursor:pointer, i want the overlay to open when the div is clicked.</p>
  
  <p>The html - </p>
  
  <pre><code>&lt;div id="trigger-overlay"&gt;
       &lt;p&gt;Lorem Ipsum&lt;/p&gt;
  &lt;/div&gt;
   &lt;div class="overlay overlay-hugeinc"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="large-12 small-12 medium-12 columns"&gt;
                      &lt;button type="button" class="overlay-close right"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="large-12 medium-12 small-12 columns"&gt;
                      &lt;div class="large-2 medium-2 small-12 columns"&gt;
                          &lt;p class="main-p"&gt;About&lt;br&gt;Differenxia&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="large-12 medium-12 small-12 columns"&gt;
                      &lt;p&gt;
                          Content for the fullscreen overlay
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>Here is the script which is handling the trigger -</p>
  
  <pre><code>(function() {
      var triggerBttn = document.getElementById( 'trigger-overlay' ),
          overlay = document.querySelector( 'div.overlay' ),
          closeBttn = overlay.querySelector( 'button.overlay-close' );
          transEndEventNames = {
              'WebkitTransition': 'webkitTransitionEnd',
              'MozTransition': 'transitionend',
              'OTransition': 'oTransitionEnd',
              'msTransition': 'MSTransitionEnd',
              'transition': 'transitionend'
          },
          transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
          support = { transitions : Modernizr.csstransitions };
  
      function toggleOverlay() {
          if( classie.has( overlay, 'open' ) ) {
              classie.remove( overlay, 'open' );
              classie.add( overlay, 'close' );
              var onEndTransitionFn = function( ev ) {
                  if( support.transitions ) {
                      if( ev.propertyName !== 'visibility' ) return;
                      this.removeEventListener( transEndEventName, onEndTransitionFn );
                  }
                  classie.remove( overlay, 'close' );
              };
              if( support.transitions ) {
                  overlay.addEventListener( transEndEventName, onEndTransitionFn );
              }
              else {
                  onEndTransitionFn();
              }
          }
          else if( !classie.has( overlay, 'close' ) ) {
              classie.add( overlay, 'open' );
          }
      }
  
      triggerBttn.addEventListener( 'click', toggleOverlay );
      closeBttn.addEventListener( 'click', toggleOverlay );
  })();
  </code></pre>
  
  <p>Classie - </p>
  
  <pre><code>( function( window ) {
  
  'use strict';
  
  // class helper functions from bonzo https://github.com/ded/bonzo
  
  function classReg( className ) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }
  
  // classList support for class management
  // altho to be fair, the api sucks because it won't accept multiple classes at once
  var hasClass, addClass, removeClass;
  
  if ( 'classList' in document.documentElement ) {
    hasClass = function( elem, c ) {
      return elem.classList.contains( c );
    };
    addClass = function( elem, c ) {
      elem.classList.add( c );
    };
    removeClass = function( elem, c ) {
      elem.classList.remove( c );
    };
  }
  else {
    hasClass = function( elem, c ) {
      return classReg( c ).test( elem.className );
    };
    addClass = function( elem, c ) {
      if ( !hasClass( elem, c ) ) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function( elem, c ) {
      elem.className = elem.className.replace( classReg( c ), ' ' );
    };
  }
  
  function toggleClass( elem, c ) {
    var fn = hasClass( elem, c ) ? removeClass : addClass;
    fn( elem, c );
  }
  
  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };
  
  // transport
  if ( typeof define === 'function' &amp;&amp; define.amd ) {
    // AMD
    define( classie );
  } else {
    // browser global
    window.classie = classie;
  }
  
  })( window );
  </code></pre>