I need to toggle the visibility of a specific div when clicking on an anchor. Here is the code I have written for this:
jQuery('.mycart').click(function(e){
e.preventDefault();
var target = jQuery(".basket");
if(target.is(':visible'))
jQuery('.basket').css('cssText', 'display: none !important');
else
jQuery('.basket').css('cssText', 'display: block !important');
});
jQuery(document).mouseup(function (e){
var container =jQuery(".basket");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
html:
<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
<span class="callout-arrow"></span>
<div class="basketcount"><span>5</span></div>
<button type="button" class="checkoutbtn">checkout</button>
</div>
The issue I am facing is that even though the div shows onclick, it does not hide again. This is due to the second function which hides the container when the user clicks outside of it.