i've been looking all over for a solution to this but i just can't figure out how.
what i want is for the specific header that was clicked to be the only one to expand.
demo is here: http://jsfiddle.net/bm92L0eg/1/
html:
<h3 class="click-list">header a</h3>
<ul class="open-list">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h3 class="click-list">header b</h3>
<ul class="open-list">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h3 class="click-list">header c</h3>
<ul class="open-list">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
jquery:
$('.click-list').click(function() {
$(this).find('.open-list').slideToggle(600);
});
that jquery code didn't work while this code below is the one that acivates all headers:
$('.open-list').slideToggle(600);
Use .next()
to select the adjacent .open-list
element.
It should be:
$('.click-list').click(function () {
$(this).next('.open-list').slideToggle(600);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.