Question

So when I run the following code, I click on a div, and another div slides out.

<div class="section" id="1">Hi</div>
<div class="under" id="1">Hola</div>
<div class="section" id="2">Foo bar</div>
<div class="under" id="2">Derp</div>
</td></table>
</td></table>

<script>
$(".section").click(function(){
var id = this.id;
    $(".under").slideToggle("slow");
  });

But, when I click on the div with the class “section”, it shows ALL of the divs with the class “under.” What I want to do is show the div “under” with an id that is equal to the id of the div selected (i.e. show “under” with id=”1″ when “section” with id=”1″ is clicked). How would I do this?

Answer 1

use

.next('div');

so whole code would be

<style> 
   .under{ 
      display:none; 
 padding:5px; 
     background-color:gray; 
    } 
</style> 
<div class="section" id="1">Hi</div> 
<div class="under" id="1">Hola</div> 
<div class="section" id="2">Foo bar</div> 
<div class="under" id="2">Derp</div> 
<script> 
$(".section").click(function(){ 

    $(this).next('div').slideToggle("slow"); 
  }); 
</script>

working demo