CODEWITHSUNDEEP
javascriptjqueryappendreplace
Brooke.
Brooke.

Reputation: 3731

Replace Appended text with new text on Click

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?

Upvotes: 0

Views: 2155

Answers (4)

kobe
kobe

Reputation: 15835

you can use .html(''), this will empty the div contents.

("#divid").html("");

Upvotes: 0

Moin Zaman
Moin Zaman

Reputation: 25445

using a span is easier IMO.

but you can still do it by using regular expressions and matching / replacing (click to view) with (click to close)

I've also changed the click to a toggle and handled the changing of text back and hiding and showing of #template

Here's an example: http://jsbin.com/ixigi3/3

Also pastes here:

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">

    </style>
</head>
<body>

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


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function() {
        $('#template').hide();
        $('#toggle_template')
            .css('cursor','pointer')
            .append(' (click to view)')
            .toggle( function(){
                $('#toggle_template').html( $('#toggle_template').html().replace(/view\)/i, "close)") );
                $('#template').show(500);
                },
                function(){
                $('#toggle_template').html( $('#toggle_template').html().replace(/close\)/i, "view)") );
                $('#template').hide(500);
            });
    });
</script>
</body>
</html>

Upvotes: 1

sje397
sje397

Reputation: 41822

This is one way:

var t = $('#toggle_template').text();
$('#toggle_template').text(t.replace(/ \(click to view\)/, ' (click to close)'));

...but you'll need more logic to change the text back.

As mentioned, it would be better to include other elements which you can show/hide in their entirety rather than modifying content dynamically like this. You could even do it entirely with css, by simply toggling a class on your toggle_template div and using the css 'after' pseudo element.

Upvotes: 1

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

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

Upvotes: 1

Related Questions