显示和隐藏 div jQuery

我对这个结构有：

HTML:

<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>

jQuery:

$(document).ready(function () {
    $('.a').click(function () {
        if ($('.b').is(":visible")) {
            $('.b').hide();
        } else {
            $('.b').show();
        }
        return false;
    });
});

如何使其仅显示我单击的 div

JSFiddle http://jsfiddle.net/aahqh80q/.

使用下面的代码。查看DEMO http://jsfiddle.net/aahqh80q/5/

jquery next() https://api.jquery.com/next/ .

获取集合中每个元素的紧随其后的同级元素 匹配的元素。如果提供了选择器，它将检索下一个 仅当它与该选择器匹配时才为兄弟姐妹。

 $(document).ready(function () {
   $('.a').click(function (e) {
     e.preventDefault();
    // $('.b').hide();  if you want to hide opened div uncomment this line
     var bOBJ = $(this).next('.b');
    if (bOBJ.is(":visible")) {
        bOBJ.hide();
    } else {
        bOBJ.show();
    }
    //return false;
  });
});

第二个选项DEMO http://jsfiddle.net/aahqh80q/3/

Jquery toggle() https://api.jquery.com/toggle/

显示或隐藏匹配的元素。

 $(document).ready(function () {
   $('.a').click(function (e) {
     e.preventDefault();
     // $('.b').hide();  if you want to hide opened div uncomment this line  
    $(this).next('.b').toggle();
     //return false;
   });
 });