title: Toggle/document/click and close other?
body: <p>Here is the scenario.</p>
  
  <p><strong>Step 1-</strong> Click action opens a drop down that can be closed on click of anywhere except the dropdown area and action text.</p>
  
  <p><strong>Problem 1-</strong> I want this also to get close on click of action text only. So the solution will be it get close on click of area anywhere except dropdown area and also on click of action text.
  <a href="https://i.stack.imgur.com/koF3c.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/koF3c.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Step 2 -</strong>
  On click of multiple action text opens multiple dropdowns .</p>
  
  <p><strong>Problem 2-</strong> I want it the way that if one gets open other gets close.
  <a href="https://i.stack.imgur.com/d0Ekz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d0Ekz.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.ToggleClass a').click(function(ev) {
    $(this).next('.ActionDropDown').fadeIn(500);
  
  
  });
  $(document).click(function(e) {
    e.stopPropagation();
    var container = $(".ToggleClass");
  
    //check if the clicked area is dropDown or not
    if (container.has(e.target).length === 0) {
      $('.ActionDropDown').fadeOut(500);
    }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0px;
    padding: 0px;
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: arial;
  }
  
  a {
    text-decoration: none;
  }
  
  body,
  html {
    width: 100%;
    height: 100%;
    background: #cbeeff
  }
  
  .row1 {
    width: 100%;
    background: #fff;
    margin: 5px 0;
  }
  
  .row1-2 {
    width: 50%;
    position: relative;
    text-align: center;
    padding: 10px 0;
    border-right: 2px solid #000
  }
  
  .row1-2+.row1-2 {
    border-right: 0px;
  }
  
  .row1-2 a {
    color: #ff4886;
    float: none;
  }
  
  .ActionDropDown {
    position: absolute;
    background: #7bd4ff;
    border: 2px solid #000;
    top: 20px;
    padding: 30px 10px;
    display: none;
    z-index: 9;
    right: 0px;
    left: 0px;
    max-width: 180px;
    margin: 0px auto;
  }
  .InfoDiv{ width:100%; padding:10px; background:#ffadc9;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-----Row 1---------&gt;
  &lt;div class="row1"&gt;
    &lt;div class="row1-2"&gt;Simple Text&lt;/div&gt;
    &lt;div class="row1-2 ToggleClass"&gt; &lt;a href="#"&gt;Action&lt;/a&gt;
      &lt;div class="ActionDropDown"&gt;
        I am a Drop Down !
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-----Row 1---------&gt;
  &lt;!-----Row 2---------&gt;
  &lt;div class="row1"&gt;
    &lt;div class="row1-2"&gt;Simple Text&lt;/div&gt;
    &lt;div class="row1-2 ToggleClass"&gt; &lt;a href="#"&gt;Action&lt;/a&gt;
      &lt;div class="ActionDropDown"&gt;
        I am a Drop Down !
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-----Row 2---------&gt;
  &lt;!-----Row 3---------&gt;
  &lt;div class="row1"&gt;
    &lt;div class="row1-2"&gt;Simple Text&lt;/div&gt;
    &lt;div class="row1-2 ToggleClass"&gt; &lt;a href="#"&gt;Action&lt;/a&gt;
      &lt;div class="ActionDropDown"&gt;
        I am a Drop Down !
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-----Row 3---------&gt;
  
  &lt;div class="InfoDiv"&gt;
   &lt;b&gt;Info:&lt;/b&gt; Right now click on Action on each row open drop down multiple times. What I want is when one drop down is open on click of action , the other drop down if open should get close.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>