title: Toggling multiple divs and also close when anywhere outside the div is clicked
body: <p>I use this jQuery code to toggle a div and also make the div to close if anywhere outside the div is clicked:</p>
  
  <pre><code>$(document).ready(function(){
    $('html').click(function(){
    $('div').hide();
  });
  
  $('a').click(function(e){
    e.stopPropagation();
  });
  
  $('div').click(function(e){
    e.stopPropagation();
  });
  
  $('a').click(function(){
    $('div').toggle();
  });
  
  })
  </code></pre>
  
  <p>But I have many divs which I need to run this function so I did this:</p>
  
  <pre><code>&lt;a href="javascript:;" class="tgl" id="link-1" alt="div-1"&gt;LINK 1&lt;/a&gt;
  &lt;a href="javascript:;" class="tgl" id="link-2" alt="div-2"&gt;LINK 2&lt;/a&gt;
  &lt;a href="javascript:;" class="tgl" id="link-3" alt="div-3"&gt;LINK 3&lt;/a&gt;
  &lt;div id="div-1"&gt;&lt;/div&gt;
  &lt;div id="div-2"&gt;&lt;/div&gt;
  &lt;div id="div-3"&gt;&lt;/div&gt;
  $(document).ready(function(){
    $('html').click(function(){
    $('#div-1').hide();
    $('#div-2').hide();
    $('#div-3').hide();
  });
  
  $('#link-1').click(function(e){
    e.stopPropagation();
  });
  $('#link-2').click(function(e){
    e.stopPropagation();
  });
  $('#link-3').click(function(e){
    e.stopPropagation();
  });
  
  $('#div-1').click(function(e){
    e.stopPropagation();
  });
  $('#div-2').click(function(e){
    e.stopPropagation();
  });
  $('#div-3').click(function(e){
    e.stopPropagation();
  });
  
  $('.tgl').click(function(){
    altDiv = $(this).attr('alt');
    $('#'+altDiv).toggle();
  });
  
  })
  </code></pre>
  
  <p>But it works for only the first div, the two other divs don't even toggle at all
  here is a <a href="https://jsfiddle.net/the_king/5amv76uz/" rel="nofollow">jsFiddle</a> link. I want each <code>link</code> <code>toggle</code> the <code>div</code> <code>id</code> with the <code>alt</code> value. which means that if <code>div-1</code> is toggled on and <code>link-2</code> is clicked, the <code>div-1</code> will be hidden and <code>div-2</code> will show up</p>