Question

I’ve got some HTML like the following:

<ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#" class="toggle">[Open|Close]</a><a href="#">Page 2</a>
        <ul>
            <li><a href="#">Page 2-1</a></li>
            <li><a href="#">Page 2-2</a></li>
            <li><a href="#">Page 2-3</a></li>
            <li><a href="#">Page 2-4</a></li>
        </ul>
    </li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#">Page 5</a></li>
</ul>

And would like that when the a with the class ‘toggle’ is clicked the ul will be toggled. I am fairly decent with basic jQuery stuff, but have no real idea where to start with this one! Any alternative approaches that achieve the same result would be welcome too.

Answer 1

With that markup, this would work:

$('.toggle').click(function(){
    $(this).siblings('ul').toggle();
});