Question

I have been looking through the archives but can’t find a solution that works, I have a menu;

<ol>
    <li>
        <span><a class="doToggle"></a></span>
        <span class="toggleMe">stuff to hide and show</span>
    </li>
</ol>

I’m trying to toggle the second span when the anchor in the first span is clicked, I’ve tried;

$(this).parent().next().toggle();

Which I think should work, but I’m getting no response. any hints at where I’m going wrong?

Answer 1

😀

http://jsfiddle.net/27xCe/

HTML:

<ol>
    <li>
        <span><a class="doToggle" href='#'>Click Me to Toggle</a></span>
        <span class="toggleMe">stuff to hide and show</span>
    </li>
</ol>​

jQuery:

$(function() {
    $('.doToggle').click(function(e) {
        $('.toggleMe').toggle();
        e.stopPropagation();
    });
});

or with next():

$(function() {
    $('.doToggle').click(function(e) {
        $(this).parent().next().toggle();
        e.stopPropagation();
    });
});

http://jsfiddle.net/27xCe/1/

Thou shalt do some tutorials. http://docs.jquery.com/Tutorials

​