Response title
This is preview!
Selectors for clicked element
in Getting Started
•
11 years ago
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
1