Show sub div from multiple parent divs

Question

I have two elements .classand javascript code:

$(document).ready(function() {
  $(".button").click(function() {
    $(".class-sub").show();
    // how to show .class-sub by button of this parent class
  });
});

<div class="class1">
  <div>
    <a class="button">Click sub class1 class</a>
  </div>
  <br />
  <div class="class-sub" style="display:none">form class2</div>
</div>


<div class="class2">
  <div>
    <a class="button">Click sub class2 class</a>
  </div>
  <br />
  <div class="class-sub" style="display:none">form class2</div>

</div>

Run codeHide result

How can I show .class-subby clicking the button of its parent class? I want to click .buttonand show .class-subthe same parent.

Answer 1

$(document).ready(function() {
  $(".button").click(function() {
    $(this).parent().parent().find("div.class-sub").show();
    // how to show .class-sub by button of this parent class
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="class1">
  <div>
    <a class="button">Click sub class1 class</a>
  </div>
  <br />
  <div class="class-sub" style="display:none">form class2</div>
</div>


<div class="class2">
  <div>
    <a class="button">Click sub class2 class</a>
  </div>
  <br />
  <div class="class-sub" style="display:none">form class2</div>

</div>

Run codeHide result

Use .parent()2 times to get to the parent div and use .find()to find the target div

Answer 2

-, .classX , - .class . closest() , , find(), class-sub. :

$(document).ready(function() {
    $(".button").click(function() {
        $(this).closest('.class').find(".class-sub").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class class1">
    <div>
        <a class="button">Click sub class1 class</a>
    </div><br />
    <div class="class-sub" style="display: none">form class2</div>
</div>

<div class="class class2">
    <div>
        <a class="button">Click sub class2 class</a>
    </div><br />
    <div class="class-sub" style="display: none">form class2</div>
</div>

Hide result

, show() toggle(), / .

parent(), class , , .