Question

I have this HTML code:

<p>Hello <span class="hide" style="display:none">there</span> jquery</p>
<button class="toggle">Toggle</button>
<p>Hello <span class="hide" style="display:none">You</span> jquery</p>
<button class="toggle">Toggle</button>

With this jQuery:

$('.toggle').toggle(
    function() {
        $('.hide').show("slow");},
    function() {    
        $('.hide').hide("slow");}
);

Now, as you can see both buttons have the same class, and both span have the same class. What I’m trying to achieve here is that when I press one of them it should hide/show the span above it.

I’ve got it running the way it is now on this jsFiddle

Any ideas?

Thanks in advance

Federico

Answer 1

Perhaps

$('button.toggle').click(function() {
    $(this).prev('span').toggle();
});