Question

This is a pretty basic question, but I’ve been working at it for a while and can’t figure out the solution.

I have a series of <li> items in an HTML document. At the end of each, I have a button that I want to, when clicked, show some hidden text.

<ol>
    <li>Click this button to show hidden text <button>Click</button>
    <p style="display:none;">Some text</p></li>
</ol>

Since I have a series of these <li>, I figured the easiest way to do this is having each button click show the nearest hidden element through JQuery

Here’s the JQuery code I’ve been trying to use:

$('button').click(function() {
    $('p.pages').nextUntil('li').toggle('slow');
});

To be honest, I’m not sure I’m using the right JQuery method to do this, but I’ve tried looking through the JQuery docs and it seems like this best fits what I’m trying to do.

Answer 1

What you looking for is

$('button').click(function() {
    $(this).next('p').toggle('slow');
});

fiddle