CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shubham Jaiswal
Shubham Jaiswal

Reputation: 118

Using toggle in JQuery but on clicking outside div need to be close

I am using JQuery and using toggle function for sliding a ul li element. But what I want is, if someone clicks outside (anywhere on the page) that div will be closed if its in toggle Down condition. I am sharing my code here for better understanding...

$('#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>

Upvotes: 2

Views: 75

Answers (2)

kristoffer petersen
kristoffer petersen

Reputation: 21

You can bind an event in such a way that it only fires once. You can do that inside the share-drop event-handler, that way the event doesn't fire unless the share-drop is open. 

$("#share-drop").click(function(e) {
  e.stopImmediatePropagation();
  var $shareDrop = $("#share-drop ul")
  $shareDrop.toggle(300);
  $("window").one(function() {
    $shareDrop.hide(300);
  });
});
$("header .header-top .left-nav .share ul li").click(function(e) {
  e.stopImmediatePropagation();
});

Upvotes: 0

Rohit Sharma
Rohit Sharma

Reputation: 3334

You should make a click event on window to hide the ul. You can do this as: 

$('#share-drop').click(function(event){
    event.stopPropagation();  // now it will not accept clicks from window 
    $('#share-drop ul').toggle(300);  
});

// to hide the ul on clicking outside the div when it is visible
$(window).on('click', function(){
    if($('#share-drop ul').is(':visible')) {
        $('#share-drop ul').hide(300);
    }
});


$('#share-drop').click(function(event){
    event.stopPropagation();
    $('#share-drop ul').toggle(300);  
});

// to hide the ul on clicking outside the div when it is visible
$(window).on('click', function(){
    if($('#share-drop ul').is(':visible')) {
        $('#share-drop ul').hide(300);
    }
});
<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>

Upvotes: 2

Related Questions