title: Close div when click on another button
body: <p>I have two elements with the same name that contains some hidden <code>content</code>. When I click on the <code>button</code> the <code>content</code> is shown.</p>
  
  <p>Till here everything is perfect, now I am wondering how can I <code>hide</code> the <code>content</code> in the other <code>div</code> when I click on one of the two divs? </p>
  
  <p>e.g. If I click on the <code>first button(A)</code> and the content show up, I want the content from the first <code>div</code> to disappear I <code>click</code> on the <code>second button(B)</code>. I want to keep the same class name though and not adding extra markup or different <code>class/ID</code> names!!</p>
  
  <pre><code>var openAccordionContent = function() {
          var $buttons = $('.accordion-content-button'),
              $content = $('.accordion-content');
  
  
          $buttons.each(function() {
              var $button = $(this),
              $content = $button.next('.accordion-content');
  
              $button.on("click", function(){
                  $content.toggleClass('show');
                  return false;
              });  
  
          });
      }();
  </code></pre>
  
  <p>Here is my <a href="https://jsfiddle.net/vx2bguyp/3/" rel="nofollow">fiddle</a>:</p>