Question

I want to change span element’s text with click:

$('.int-bank h2 span').text('Open List');
$('.int-bank h2').bind("click", function (e) {
    $(this).next("p").toggleClass("lblock");
    var spn = $(this).find("span");
    spn.text('Close List');
});

But in the second click, the span’s text does not change to “Open List”. How can I do this?

Answer 1

Too bad there’s no toggleText() ;-). You’ll have to check the value yourself:

spn.text(spn.text() == 'Open List' ? 'Close List' : 'Open List');

---

Hey, while I’m at it, why not make a toggleText():

$.fn.toggleText = function (text1, text2) {
    var curText = this.text();
    this.text(!$.trim(curText) ? text1 : 
        (curText == text1 ? text2 : text1));
    return this;
};

Then simplify your code like so:

$('.int-bank h2 span').text('Open List');
$('.int-bank h2').click(function () {
    $(this).next('p').toggleClass('lblock');
    $(this).find('span').toggleText('Open List', 'Close List');
});