title: jQuery box open/close functions with toggle animates
body: <p>I have this jquery function. I need a toggle function to open and close the div boxes. But at the same time i need it to close all open div boxes with an animation, and then open the one you have clicked on. </p>
  
  <p>JS:</p>
  
  <pre><code>function showAndHidediv(id) {
  $("#" + id).slideToggle();
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a onclick="showAndHidediv('test');"&gt;Open 1&lt;/a&gt;    
  &lt;a onclick="showAndHidediv('test2');"&gt;Open 2&lt;/a&gt;    
  &lt;a onclick="showAndHidediv('test3');"&gt;Open 3&lt;/a&gt;
  
  &lt;div id="test" class="accordionBox"&gt;Test 1&lt;/div&gt;
  &lt;div id="test2" class="accordionBox"&gt;Test 2&lt;/div&gt;
  &lt;div id="test3" class="accordionBox"&gt;Test 3&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.accordionBox {
      width: 100%!important;
      display: none;
      height: 100px;
      overflow: hidden;
      background-color: #119df2;
  }
  </code></pre>
  
  <p>JS fiddle:</p>
  
  <p><a href="https://jsfiddle.net/rdm3Lumk/38/" rel="nofollow">JS fiddle here</a></p>