Show a div pertaining to a certain id?

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;
    $(".und开发者_如何转开发er").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?

---

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

---

You can use .next, or depending on how you have things setup, .nextAll. Here is a short demo i did for a question similar to this:

http://jsfiddle.net/andresilich/AeGSQ/

---

Ok there are a few things wrong with your HTML; I will go through them one by one.

1. There is no opening <table> or <td> tag. This will result in invalid HTML.
2. There should be a <tr> tag containing the td tag. It is structurally incorrect as it is at the moment.
3. I am thinking you're using tables for layout; tables should be used for data-display only, not for page layout.
4. You have multiple ids the same. The idea of an id is that it identifies one element and one element only. Classes are used to style multiple elements the same.

I have rewritten your code at http://jsfiddle.net/FS3rt/. It also contracts any visible sections so that the user is presented only with the information they would like to see.