jQuery Toggle closest info

Question

I have the following html:

<div class="col-md-12">
   <div class="group">
      <div class="label">
         <li class="interrogation">?</li>
      </div>
   </div>
   <div class="message"></div>
</div>

<div class="col-md-12">
   <div class="group">
      <div class="label">
         <li class="interrogation">?</li>
      </div>
   </div>
   <div class="message"></div>
</div>

This is my ns.init function:

ns.init = function() {
    $(".message").hide();
    $(".interrogation").click(function(){
        $(".interrogation").closest(".group").parent().find(".message").toggle();
    });
}

The current code works but it toggles all the messages on the page when I click one of them. How can I make it toggle only the message that is exactly after the question mark ?

use `$(this).closest()` instead of `('.interrogation').closest()` — billyonecan, Aug 25 '17 at 14:40

score 3 · Accepted Answer · answered Aug 25 '17 at 14:44

That is because you use $(".interrogation") selector in your function. This selects all elements with that class in the document. Use $(this) to only have the element that you clicked on as reference for your selector.

Here is a working fiddle:

$(function() {
    $(".message").hide();
    $(".interrogation").click(function(){
        $(this).closest(".group").parent().find(".message").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div class="group">
              <div class="label">
                  <li class="interrogation">?</li>
              </div>
          </div>
        <div class="message">Message1</div>
        </div>
        <div class="col-md-12">
          <div class="group">
              <div class="label">
                  <li class="interrogation">?</li>
              </div>
          </div>
  <div class="message">Message2</div>
</div>

This question has some details on the use of `this` in jQuery click function: https://stackoverflow.com/questions/9563479/how-to-pass-this-properly-in-click-jquery-function — Tom O., Aug 25 '17 at 15:20

score 0 · Answer 2 · answered Aug 25 '17 at 14:55

Here you go with a solution https://jsfiddle.net/denquhL1/1/

$('.interrogation').click(function(){
   $(this).closest('div.group').next('div.message').slideToggle();
});

.message{
  display: none;
}

.interrogation {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
   <div class="group">
      <div class="label">
         <li class="interrogation">?</li>
      </div>
   </div>
   <div class="message">Message 1</div>
</div>

<div class="col-md-12">
   <div class="group">
      <div class="label">
         <li class="interrogation">?</li>
      </div>
   </div>
   <div class="message">Message 2</div>
</div>

Onclick of .interrogation class, it will traverse to closest .group container, then it will look for next .message container.

Instead of toggle, I've used slideToggle with animation.

Hope this will help you.

score 0 · Answer 3 · answered Aug 25 '17 at 15:15

Something like this?

var ns = {};
ns.init = function() {
  $(".message").hide()
  $(".interrogation").click(function() {
    var commonParent = $(this).closest(".col-md-12");
    commonParent.find(".message").toggle();
  });
}
ns.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div class="group">
    <div class="label">
      <li class="interrogation">?</li>
    </div>
  </div>
  <div class="message">Msg 1</div>
</div>
<div class="col-md-12">
  <div class="group">
    <div class="label">
      <li class="interrogation">?</li>
    </div>
  </div>
  <div class="message">Msg 2</div>
</div>

jQuery Toggle closest info

3 Answers3