Selectors for clicked element

Selectors for clicked element

I have an html file that looks like the following.

---------------------------------
<div id="outline-container-1_1" class="outline-3">
  <h3 id="sec-1_1"><span class="section-number-3">1.1</span> Counting  </h3>
    <div class="outline-text-3" id="text-1_1">

      <p>this is the first CONTENT that is hidden and shown by clicking.</p>

    </div>
</div>
...
<div id="outline-container-1_1" class="outline-3">
  <h3 id="sec-1_2"><span class="section-number-3">1.2</span> Motivation  </h3>
    <div class="outline-text-3" id="text-1_2">

      <p>this is the second CONTENT that is hidden and shown by clicking.</p>

    </div>
</div>
...
----------------------------------

in CSS, 

----------------------------------
.outline-text-3 {
    display:none;
}
----------------------------------

so, the content is initially hidden.

I want to show the content by clicking the header of the content, in this case, "<h3 id="sec-1_1"><span class="section-number-3">1.1</span> Counting  </h3>".  
So I wrote,

----------------------------------
$(document).ready(function(){
    $(".outline-3 h3").click(function(){
$(".outline-text-3").toggle(1000);
    });
});
----------------------------------

But this opens up all the contents simultaneously.  I want to open only the content that follows the clicked header.  The problem is, I assume, the use of selectors.

How can I achieve this?

soichi