CODEWITHSUNDEEP
jqueryhtml-liststogglenextuntil
Adrian Motulewicz
Adrian Motulewicz

Reputation: 1

jQuery - toggle selected items

I have a problem with jQuery task. I have to toggle 'ol' context after click on header:

My html:

<h3>Task</h3>
    <ul>...</ul>
    <ol>...</ol>

<h3>Second Task</h3>
    ...

My jQuery script:

$(document).ready(function() {
    $('h3').click(function() {
        $(this).nextUntil('h3').toggle(); 
    })
})

My code toggle all context between h3 headers, but I need toogle just 'ol'. Thanks a lot for help.

Upvotes: 0

Views: 186

Answers (1)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

You can use .last() to toggle just the last element in the collection (which is the ol in this case).

Update: In case you should have something after your <ol>, it's better to use .filter('ol') to make sure that you only target the desired list.

$(document).ready(function() {
    $('h3').click(function() {
        $(this).nextUntil('h3').filter('ol').toggle(); 
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Task</h3>
    <ul><li>list1-1</li><li>list1-2</li></ul>
    <ol><li>list2-1</li><li>list2-2</li></ol>

<h3>Second Task</h3>

Upvotes: 2

Related Questions