Hide and show current div with jQuery

Question

How i can hide and how div but only current div, not all.

JS: Hide and show block div, but all not only current div.

jQuery(document).ready(function () {
  jQuery(".btn_txt_after_click").on("click", function () {
    jQuery(".long_txt").toggle("slow");
    jQuery(".btn_txt_after_click").toggle("slow");
    jQuery(".btn_txt_before_click").toggle("slow");
    jQuery(".short_txt").toggle("slow");
  });

  jQuery(".btn_txt_before_click").on("click", function () {
    jQuery(".long_txt").toggle("slow");
    jQuery(".btn_txt_before_click").toggle("slow");
    jQuery(".btn_txt_after_click").toggle("slow");
    jQuery(".short_txt").toggle("slow");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle_text_button">
  <p class="short_txt" style="display: none">Normal text</p>
  <p style="display: block" class="long_txt">More text</p>
  <div style="text-align: inherit">
    <a href="#" class="read_more">
      <span class="btn_txt_before_click" style="display: block">More</span>
      <span class="btn_txt_after_click" style="display: none">Less</span>
    </a>
  </div>
</div>

<div class="toggle_text_button">
  <p class="short_txt" style="display: none">Normal text</p>
  <p style="display: block" class="long_txt">More text</p>
  <div style="text-align: inherit">
    <a href="#" class="read_more">
      <span class="btn_txt_before_click" style="display: block">More</span>
      <span class="btn_txt_after_click" style="display: none">Less</span>
    </a>
  </div>
</div>

http://jsfiddle.net/toyzmkg6/

Answer 1

You can do that by using $(this) to target the current event emitter.

jQuery(document).ready(function () {
  jQuery(".btn_txt_after_click").on("click", function () {
    $(this).closest('.toggle_text_button').find(".long_txt").toggle("slow");
    $(this).closest('.toggle_text_button').find(".btn_txt_after_click").toggle("slow");
    $(this).closest('.toggle_text_button').find(".btn_txt_before_click").toggle("slow");
    $(this).closest('.toggle_text_button').find(".short_txt").toggle("slow");
  });

  jQuery(".btn_txt_before_click").on("click", function () {
    $(this).closest('.toggle_text_button').find(".long_txt").toggle("slow");
    $(this).closest('.toggle_text_button').find(".btn_txt_before_click").toggle("slow");
    $(this).closest('.toggle_text_button').find(".btn_txt_after_click").toggle("slow");
    $(this).closest('.toggle_text_button').find(".short_txt").toggle("slow");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle_text_button">
  <p class="short_txt" style="display: none">Normal text</p>
  <p style="display: block" class="long_txt">More text</p>
  <div style="text-align: inherit">
    <a href="#" class="read_more">
      <span class="btn_txt_before_click" style="display: block">More</span>
      <span class="btn_txt_after_click" style="display: none">Less</span>
    </a>
  </div>
</div>

<div class="toggle_text_button">
  <p class="short_txt" style="display: none">Normal text</p>
  <p style="display: block" class="long_txt">More text</p>
  <div style="text-align: inherit">
    <a href="#" class="read_more">
      <span class="btn_txt_before_click" style="display: block">More</span>
      <span class="btn_txt_after_click" style="display: none">Less</span>
    </a>
  </div>
</div>