Question

With jquery I am adding a div and appending the text “click to view” when the div is showin I would like to change that text to “click to close”

Right now I have

$('#toggle_template')
    .css('cursor','pointer')
    .append(' (click to view)')
    .click(function(){$('#template').toggle(500);
            $('#toggle_template').find(' (click to view)').replaceWith(' (click to close)');});

With the html:

<div id ="toggle_template">This is a section header</div>
<div id="template">
Junk to show hide on click
</div>

The div is showing and hiding correctly and the text “click to view” is being added. I can’t find a way to use jquery to remove the appended text I tryed .remove(click to view).append(click to close) and that didn’t work. I’m sure I could wrap this text in a span and then add remove or change the class but there should be an easier way.

Any Ideas on how to change this text?

Answer 1

In your current codes, it can be done like this,

$('#toggle_template').css('cursor', 'pointer')
.append(' (click to view)')
.click(function() {
    $('#template').toggle(500);
    $('#toggle_template').html(function(i, html) {
        if (html.indexOf(' (click to view)') > 1) {
            return html.replace(' (click to view)', ' (click to close)');
        }
        return html.replace(' (click to close)', ' (click to view)');
    });
});​

crazy demo