jQuery - toggle selected items

Question

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.

toggle of course, my mistake sorry – Adrian Motulewicz Nov 05 '17 at 13:23 — Adrian Motulewicz, Nov 05 '17 at 13:23

score 2 · Accepted Answer · answered Nov 05 '17 at 13:23

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>

jQuery - toggle selected items

1 Answers1