CODEWITHSUNDEEP
jquerytoggle
ab2211
ab2211

Reputation: 11

Toggle div with same class

I'm looking for a solution to toggle just the next .info div if I click "clickme". I tried many things with next() etc., but nothing works. 

$(document).ready(function(){
  $(function(){
    $(".clickme").click(function(){
      $(".info").slideToggle();
    });
  }); 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mbox">
  <div class="mbox-inner">
    <div class="mbox-left"><span class="mstep">1.1</span>Great</div>
    <div class="mbox-right">
      <select class="ignore" id="modul1_1">
        <option value="0">a</option>
        <option value="1">b</option>
      </select>
      <div class="clickme">Click</div>
    </div>
  </div>
</div>
<div class="info">Lorem ipsum dolor sit amet, consetetur sadipscing</div>

<div class="mbox">
  <div class="mbox-inner">
    <div class="mbox-left"><span class="mstep">1.2</span>Greater</div>
    <div class="mbox-right">
      <select class="ignore" id="modul1_2">
        <option value="0">a</option>
        <option value="1">b</option>
      </select>
      <div class="clickme">Click</div>
    </div>
  </div>
</div>
<div class="info">Lorem ipsum dolor sit amet, consetetur s</div>

Upvotes: 1

Views: 303

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You could use closest() and next() to achieve that :

$(function(){
    $(".clickme").click(function(){
        $(this).closest('.mbox').next(".info").slideToggle();
    });
});

The $(this) refer to the clicked element and .closest('.mbox') will get the parent with class mbox of clicked item, then the .next(".info") will select the next element with the class info.

NOTE : No need for using two ready functions.

Hope this helps.

$(function(){
  $("<div><a class=\"close\" href=\"#\">Hinweis schliessen</a></div>").appendTo(".info");
  
  $(".clickme").click(function(){
    $(this).closest('.mbox').next(".info").slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mbox">
  <div class="mbox-inner">
    <div class="mbox-left"><span class="mstep">1.1</span>Great</div>
    <div class="mbox-right">
      <select class="ignore" id="modul1_1">
        <option value="0">a</option>
        <option value="1">b</option>
      </select>
      <div class="clickme">Click</div>
    </div>
  </div>
</div>
<div class="info">Lorem ipsum dolor sit amet, consetetur sadipscing</div>

<div class="mbox">
  <div class="mbox-inner">
    <div class="mbox-left"><span class="mstep">1.2</span>Greater</div>
    <div class="mbox-right">
      <select class="ignore" id="modul1_2">
        <option value="0">a</option>
        <option value="1">b</option>
      </select>
      <div class="clickme">Click</div>
    </div>
  </div>
</div>
<div class="info">Lorem ipsum dolor sit amet, consetetur s</div>

Upvotes: 1

Related Questions