Change label based on element visibility (jQuery)

Question

HTML:

<a href="#">Show next element</a>
<div>content</div>

jQuery:

$('a').toggle(function () {
    $(this).next().show();
},
function () {
    $(this).next().hide();
});

How do I change the above jQuery so it also changes the "Show" in the link to "Hide" when the element is visible?

Thanks!

Answer 1

Hasn't been tested...

$('a').toggle(function () {
    $(this).next().show();
    $(this).html("Hide next element");
},
function () {
    $(this).next().hide();
    $(this).html("Show next element");
});

Answer 2

$('a').toggle(function () {

    $(this).next().show();
    $(this).html('Hide next element');
},
function () {
    $(this).next().hide();
    $(this).html('Show next element');
});