ansaurus

Question

Replace Appended text with new text on Click

Answer 1

+1 A:

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>

Moin Zaman 2010-10-04 05:19:17

eek! Regex. I think I'll use a span. I'm just very new to jquery and not sure the best way to do this either. Should I use `replaceWith` then just change the text back and forth on click??

BandonRandon 2010-10-04 05:28:17

have a look here: http://jsbin.com/ixigi3/3

Moin Zaman 2010-10-04 05:35:37

Answer 2

A:

you can use .html(''), this will empty the div contents. ("#divid").html("");

gov 2010-10-04 05:22:55

you can even use .text() to change the contents of the div...tag

gov 2010-10-04 05:24:20

If I used `.html('')` it removes the link compeltely `.text` works better but I have to insert the all the html and append the text manually.

BandonRandon 2010-10-04 05:29:26

Answer 3

+1 A:

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

Reigel 2010-10-04 05:28:30

Maybe not the simplest way to do this (in general) but it works with my code with no additional spans or classes. Thank you!

BandonRandon 2010-10-04 05:35:04

if you wanna try additional `span`, [look at it here](http://jsfiddle.net/h3HbT/).

Reigel 2010-10-04 05:36:43

Thanks that seems to be simpler and you're only replacing one word which in theory should be faster.

BandonRandon 2010-10-05 01:49:13

Answer 4

+1 A:

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.

sje397 2010-10-04 05:29:23

ansaurus

tags:

views:

answers:

Replace Appended text with new text on Click

crazy demo

related questions