JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<div id='header'>header</div>
Click anywhere outside, and the header will slide.<p> Click inside, and it will not.</p>

CSS

#header {
    height: 100px;
    background: orange;
    color: white;
}

JavaScript

$(document).click(function() {
    $('#header').slideToggle({
        duration: 550, 
        easing: 'easeOutExpo'
    });
});

$('#header').click(function( event ) {
    event.stopPropagation();
});