Toggle div - Hide on body.click()
Toggle a div when a button is clicked. If anywhere outside of the div is clicked, it should slide back up.
HTML
<a href="#" id="button"><input type="text"></a>
<div id="content"> <div class="passengerdetails">
<div class="row">
<div class="col-md-6">Adults</div>
<div class="col-md-6">
<input type="number" class="formbar" name="">
</div>
</div>
<div class="row">
<div class="col-md-6">Child</div>
<div class="col-md-6">
<input type="number" class="formbar" name="">
</div>
</div>
<div class="row">
<div class="col-md-6">Infant</div>
<div class="col-md-6">
<input type="number" class="formbar" name="">
...CSS
#content { background: salmon; display: none; height: auto; width: auto; }JavaScript
$(document).ready(function(){
$('#button').click( function(e) {
e.preventDefault(); // stops link from making page jump to the top
e.stopPropagation(); // when you click the button, it stops the page from seeing it as clicking the body too
$('#content').toggle();
});
$('#content').click( function(e) {
e.stopPropagation(); // when you click within the content area, it stops the page from seeing it as clicking the body too
});
$('body').click( function() {
$('#content').hide();
});
});