Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll find the code snippet I am working with:
$('#share-drop').click(function() {
$('#share-drop ul').toggle(300);
});
$('header .header-top .left-nav .share ul li').click(function(e) {
e.stopImmediatePropagation();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share" id="share-drop">
<img src="images/share-icon.png" alt="">
<span>Share</span>
<ul style="">
<li><a href="javascript:void(0)"><i class="fab fa-facebook-f">
</i>Facebook</a>
</li>
<li><a href="javascript:void(0)"><i class="fab fa-twitter">
</i>Twitter</a>
</li>
<li><a href="javascript:void(0)"><i class="fab fa-google-plus-g">
</i>Google Plus</a>
</li>
<li><a href="javascript:void(0)"><i class="fab fa-linkedin-in">
</i>LinkedIn</a>
</li>
</ul>
</div>