Закрыть div при нажатии на другую кнопку

Question

У меня есть два элемента с тем же именем, что и некоторые скрытые content. Когда я нажимаю на button, отображается content.

До здесь все идеально, теперь мне интересно, как я могу hide в content в другом div, когда я нажимаю на одном из двух див?

например. Если я нажму на first button(A) и покажут содержимое, я хочу, чтобы содержимое с первого div исчезло с click на second button(B). Я хочу сохранить одно и то же имя класса и не добавлять лишнюю разметку или разные имена class/ID !!

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; 
      }); 

     }); 
    }(); 

Вот мой fiddle:

Answer 1

Это может быть так же просто, как:

var openAccordionContent = function() { 
    $('.accordion-content-button').on('click', function() { 
     var $next_content = $(this).next('.accordion-content'); 

     // Remove the class show from all the items, except the one 
     // sitting next to the clicked one. 
     $('.accordion-content').not($next_content).removeClass('show'); 

     // Toggle the class show for the item which is sitting next 
     // to the clicked one. 
     $next_content.toggleClass('show'); 
    }); 
}(); 

Demo

Answer 2

Использование removeClass (на всех, кроме выбранного одного) и toggleClass вместо на выбранный:

Можно также упростить, что код намного:

$('.accordion-content-button').click(function(){ 
    var $accord = $(this).next('.accordion-content'); 
    $('.accordion-content').not($accord).removeClass('show'); 
    $accord.toggleClass('show'); 
}); 

https://jsfiddle.net/vx2bguyp/16/