Javascript Drop Down/Up

by Farzad Cyrus

HTML

<div id="fixed">

  <div class="drop">
    <button class="drop-button">Click Me</button>
    <div class="drop-container">
      <p>
        Hello, can you see me? :)
      </p>
    </div>
  </div>

</div>

CSS

#fixed {
  position: absolute;
  top: 160px;
  left: 160px;
  background: #fff;
  border: 1px solid #ddd;
  width: 320px;
  height: 320px;
}

.drop-container {display: none;}
.drop.active > .drop-container,
.drop-container.active {display: block;}

JavaScript

var drop = $('.drop');

alert(drop);

$('.drop-button').click(function(){
	$(this).parent().addClass('active');
});





var registerDropContainers = function() {
  function eventPreventDefault(e, trueOrFalse) {
    // Defaults
    var e = e || event,
      trueOrFalse = trueOrFalse || false;

    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  }

  // GENERATE UNIQUE ID
  function guid() {
    function guid() {
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    }

    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
    }
    return guid();
  }


  /*  ****************
      NORMAL
      ****************    */
  function initNormal($drop) {

    var $dropButton = $drop.find('> .drop-button'),
      $dropContainer = $drop.find('> .drop-container'),
      $dropClose = $dropContainer.find('> .drop-close');

    function run(event) {
      eventPreventDefault(event);

      if ($drop.hasClass('active')) {
        $drop.removeClass('active');
        if (!$drop.hasClass('dropActive')) {}
      } else {
        $drop.addClass('active');
        if ($drop.hasClass('active')) {
          $(this).trigger('dropActive');
        }
      }
      // CLOSE DROP IF CLICKED ANYWHERE OUTSIDE DROP CONTAINER
      $(document).mouseup(function(event) {
        if (!$drop.is(event.target) && $drop.has(event.target).length === 0) {
          $drop.removeClass('active');
        }
      });
      return false;
    }

    $dropButton.unbind('click').click(function() {
      run(event);
    });

    $dropClose.unbind('click').click(function() {
      run(event);
    });
  }


  /*  ****************
      RENDER
      ****************    */
  function initRender($drop, $dom) {

    var $dropButton = $drop.find('> .drop-button'),
      $dropContainer = $drop.find('> .drop-container'),
      $dropPosition = $dropButton.offset(),
      classNames...