CODEWITHSUNDEEP
javascriptjqueryhtmltoggle
Chayma Atallah
Chayma Atallah

Reputation: 766

jQuery Toggle closest info

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 ?

Upvotes: 0

Views: 690

Answers (3)

Tom O.
Tom O.

Reputation: 5941

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>

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

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.

Upvotes: 0

hallleron
hallleron

Reputation: 1992

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>

Upvotes: 3

Related Questions