title: Make opening 1 div close all other divs of same class (excluding itself) in JS/JQuery?
body: <p>I'm trying to write JQuery for a set of animated info boxes. Clicking on the title <code>div.info-box__title</code> should open the adjacent <code>div.info-box__content</code> and at the same time close any other open <code>div.info-box__content</code></p>
  
  <p><strong>Update</strong> - should have specified, I also need ALL boxes to close when user clicks outside any <code>.info-box</code>.</p>
  
  <p><strong>Update 2</strong> - Fiddle here: <a href="https://jsfiddle.net/q9orfsoy/" rel="nofollow">https://jsfiddle.net/q9orfsoy/</a></p>
  
  <p>The markup is like this:</p>
  
  <pre><code> &lt;section id="info-box-3" class="info-box"&gt;
       &lt;div class="centerer"&gt;
           &lt;div class="info-box__close"&gt;&lt;/div&gt;
           &lt;div class="info-box__title"&gt;
               &lt;h1&gt;Title&lt;/h1&gt;
           &lt;/div&gt;
           &lt;div class="info-box__content"&gt;
               &lt;p&gt;content&lt;/p&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I always struggle with execution order issues with JS. What I have so far are two functions:</p>
  
  <p>Opening:</p>
  
  <pre><code>$('.info-box__title').bind("click touchstart", function() {
  
      // close the others and open this one
      if($(this).next('.info-box__content').css('display') == 'none') {
          $(this).next('.info-box__content').slideDown();
          $(this).parents('.info-box').addClass('open');
          $(this).parents('.info-box.open').siblings().children('.info-box__title').hide();
      }
  });
  </code></pre>
  
  <p>Closing:</p>
  
  <pre><code>// hide all when click anywhere else in the document
  $(document).bind("click touchstart", function(event) {
  
      // exclude the one that's currently open
      if(!$(event.target).closest('.info-box.open').length){
          $('.info-box__content').slideUp(function(){
              $(this).parents('.info-box').removeClass('open');
          });
      }
  });
  </code></pre>
  
  <p>What this code does is closes all the info-box__content divs when you click outside them. But if you click on another info-box__title it just opens that as well without closing the rest.</p>
  
  <p>(Initially I thought adding a class of <code>.open</code> to the one that's opened would be enough, but I guess I've run into execution order issues?)</p>
  
  <p>What's the best/recommended way to deal with something like this?</p>