jqueryhtml-liststogglenextuntil

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.

Solution

  • 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>