SlideUp with Click Anywhere to Close

Uses jQuery UI Slide Toggle to show a hidden div. Click anywhere on the page to close it, except for the div itself.

by abbylangner

HTML

<div id="clientsDropDown">
    <p id="clientsOpen">clients</p>

  <div id="clientsDashboard">
    <p id="clientsCTA">Let's make something beautiful together...
      <br /><a href="mailto:[email protected]">[email protected]</a>
    </p>
  </div>
  <!-- /clientsDashboard -->
</div>
<!-- //clientsDropDown -->

CSS

#clientsDropDown {
  position:absolute;
  bottom:0;
  width: 100%;
  padding-bottom:2%;
  z-index: 100;
}
#clientsOpen {
  background: url("images/open.png") no-repeat scroll 68px 10px #414142;
  color: #ececec;
  cursor: pointer;
  font-size: 26px;
  margin: -2px 0 0 10%;
  padding: 0 15px 2px;
  text-decoration: none;
  width: 63px;
}
#clientsCTA {
  background:#414142;
  width:100%;
  color: #CCCCCC;
  text-align:center;
  font-size: 46px;
  margin: 0;
  padding: 30px 0;
  text-decoration: none;
}
#clientsDropDown .clientsClose {
  background-image: url(images/close.png);
}
#clientsDropDown #clientsDashboard {
  display: none;
}

JavaScript

$('#clientsOpen').click(function (e) {
    togSlid();
    e.stopPropagation();
  }); // end click

function togSlid(){
    $('#clientsDropDown #clientsDashboard').slideToggle({
      direction: "up",
        duration: 300
    });
    $('#clientsOpen').toggleClass('clientsClose');
    $('#clientsOpen').slideToggle({
      direction: "down",
        duration: 100
    });
}

$(document).click(function(e){
    if(
        $('#clientsOpen').hasClass('clientsClose')
        &&
        $("#clientsDropDown").find($(e.target)).length<1
    ){
        togSlid();
    }
});