Show and hide div jQuery

Question

I have about this structure:

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

How to make that shows only the div on which I clicked

JSFiddle .

Answer 1

use below code . check DEMO

jquery next() .

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

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

Second Option DEMO

Jquery toggle()

Display or hide the matched elements.

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

Answer 2

For finding closest div.b use jQuey.siblings() . Instead of using .show() and .hide() use jQuery.toggle()

 $(function() { $('.a').click(function() { $(this).siblings('.b').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> 

Answer 3

PLEASE CHECK

  $('.a').click(function () { $('.b').hide(); $(this).siblings('.b').show(); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <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> 

Answer 4

    $(document).ready(function () {
    $('.a').click(function () {
        var parent =$(this).parent();
        var content =parent.find(".b").first();

        if ($(content).is(":visible")) {
            $(content).hide();
        } else {
            $(content).show();
        }
        return false;
    });
});

Answer 5

Please use below code

 $('.a').click(function(){ $(this).next('.b').slideToggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <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> 

Answer 6

Here is a quick and easy solution. Please check here: sfiddle.net/webyourway/aahqh80q/9/

The using of html attribute called 'hidden' is really rare. I've never used it before honestly. I guess the main reason of rare use is that semantically it should be used to hide the element regardless presentation. In your case it seems that it is better to use CSS display:none.

$(document).ready(function () {
    $('.a').click(function () {
        $('.b').hide();
        $(this).next('.b').show();
    });
});

Answer 7

You can use the .toggle() to show and hide alternative. try to this.

 $(document).ready(function () {
  $('.a').click(function () {
   $(this).next('.b').toggle(1000);
 });
});