Question

I have a table where each cell has a button in it, with this code:

<span class = "button"><input id="button" type="button">

I want to display some text to the right of it which will toggle when the button is clicked. So it would go from

[] Text

[] OtherText

without reloading the page, and it wouldn’t toggle the text in other cells. How would I do this with jQuery (or something else, if there’s a better way)?

Answer 1

HTML

<span class="button">
    <input id="button" type="button" value="save">
    <span id="show-text">Text</span>
</span>​

JS

$("#button").toggle(function() {
    $("#show-text").text("Other Text").stop();
}, function() {
    $("#show-text").text("Text").stop();
});​