Show and Hide only one <div> using jQuery .hide/.show

Question

The .show and .hide jQuery code works for every <span> with the class .q_open and q_close . I'm well aware that my because all my <div> tags have the class of .answer so they will show and hide both answers when I click on any <span> . Is there a way to reference only one <div class=".answer"> when clicking on that <span> tag rather than giving each <div> a different class ? Thanks!

The JavaScript code:

<script type="text/javascript">
    $(function() {
      $(".q_open").each(function() {
        $(this).click(function() {
          $(".answer").show();
        });
      })
      $(".q_close").each(function() {
        $(this).click(function() {
          $(".answer").hide();
        });
      });
    });
  </script>

The HTML code:

<h2 class="question">
          Q1: (the first question)
          <span class="q_open"></span>
          <span class="q_close"></span>
        </h2>
        <div class="answer" style="display: none;">
          This should only open when clicked by the <span class="q_open"> for Q1.
        </div>
        <h2 class="question">
          Q2: (the second question)
          <span class="q_open"></span>
          <span class="q_close"></span>
        </h2>
        <div class="answer" style="display: none;">
          <p>
           This should only open when clicked by the <span class="q_open"> for Q2.
          </p>
        </div>

Answer 1

I think you are looking for some sort of accordion. For that, you need to target the exact HTML element to open or close.

Try this:

$(function() {
  $(".q_open").click(function() {
    // Select the related target to open
    $(this).closest("h2").next(".answer").slideDown();
  });

  $(".q_close").click(function() {
    // Select the related target to close
    $(this).closest("h2").next(".answer").slideUp();
  });
});

Here is working example: https://jsfiddle.net/ashishanexpert/1xydbj22/

Answer 2

Use

$(this).find('.answer').show()

Like this:

<script type="text/javascript">
    $(function() {
      $(".q_open").each(function() {
        $(this).click(function() {
          $(this).find('.answer').show();
        });
      })
      $(".q_close").each(function() {
        $(this).click(function() {
          $(this).find('.answer').hide();
        });
      });
    });
  </script>

Answer 3

replace class with id

 <script type="text/javascript">
 $(function() {
  $("#q1_open").click(function() {
      $("#answer1").show();
  });
 $("#q2_open").click(function() {
      $("#answer2").show();
  });
  $(".q_close").each(function() {
    $(this).click(function() {
      $("#answer1").hide();
      $("#answer2").hide();
    });
  });
});

Answer 4

Use closest() method to find first element traversing up through its ancestors in the DOM tree.

.next() will get the immediately following sibling of each element in the set of matched elements.

 $('.q_open').click(function() { $(this).closest('.question').next(".answer").show(); }); $(".q_close").click(function() { $(this).closest('.question').next(".answer").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <h2 class="question"> Q1: (the first question) <span class="q_open">Open</span> <span class="q_close">Close</span> </h2> <div class="answer" style="display: none;"> This should only open when clicked by the <span class="q_open"> for Q1.</span> </div> <h2 class="question"> Q2: (the second question) <span class="q_open">Open</span> <span class="q_close">Close</span> </h2> <div class="answer" style="display: none;"> <p> This should only open when clicked by the <span class="q_open"> for Q2.</span> </p> </div>