How to make a toggle element close when clicking off it?
I have a group of classes which toggle. The code is this:
$(".form-btn").click(function(event) {
event.preventDefault();
$(this).next().toggle(0);
});
With the HTML as so:
<div class="form-btn-wrapper">
<div class="form-btn" id="buy-or-rent">Buy or Rent <i
class="icon-caret-down"></i></div>
<div class="form-popup radio">
<input id="check1" type="radio" name="buy-or-rent"
value="To Buy">
<label for="check1">To Buy</label>
<input id="check2" type="radio" name="buy-or-rent"
value="To Rent">
<label for="check2">To Rent</label>
</div>
</div>
<div class="form-btn-wrapper">
<div class="form-btn" id="price">Price <i
class="icon-caret-down"></i></div>
<div class="form-popup">
<input type="text" name="min-price" class="small
price-input" placeholder="Min" /> to <input type="text"
name="max-price" class="small price-input"
placeholder="Max" />
</div>
</div>
This works fine but to close each toggle (form-popup) you must click again
its respective form-btn. How can I change the jquery so that the
form-popups close when you click anywhere?
Thanks
No comments:
Post a Comment