Jquery Slideout Div

Posted in Code Snippets

Jquery Slideout Div

#slide-down is the Button that triggers the slide-out div.

.cities-dropdown is the div that drops down, magically, out of nowhere.

The “body” click function is to trigger the .slideToggle event if the user clicks anywhere in the body.

The event.stopPropgation is assigned to both the #slide-down and the .cities-dropdown divs. This is so the event won’t propagate and automatically re-trigger the toggle, and so that if you click inside the toggled element, the .cities-dropdown div, then it won’t toggle the element.

<script>
$("#slide-down").click(function () {
   $('.cities-dropdown').slideToggle();
});

$('#slide-down').click(function(event){
      event.stopPropagation();
});

$('.cities-dropdown').click(function(event){
      event.stopPropagation();
});

$("body").click(function() {
      $('.cities-dropdown').slideUp();
});
</script>