Question: Does anyone know how to do replace multiple text by clicking a button with jQuery?

I've built a website that displays some text/data eg; "£100.00", but I what I need is to be able to 'replace' those monetary values with "£XXX.XX" with a **'Hide' button** like you get on some banking websites. For example one web page has:

£100.00, £200.00, £130.00 etc etc..

...so when a user presses the Hide button, all of the numbers on the page turn to £XXX.XX. Ideally, the button should then display "Show" instead of "Hide" and switch back when toggled.

This is for a static dummy site, so no data base.

I suspect this is best handled with jQuery?

Thanks for your time,

D.

Answer: 
If your markup is something like this you can try this.

```
<span>£1000.00</span><span class="showhide">Hide</span>

```

JS

```
$('.showhide').click(function(){
    var $this = $(this);
    var $prev = $this.prev();
    if(!$prev.data('originalvalue')){
        $prev.data('originalvalue', $prev.text());
    }
    if($this.text() == 'Hide'){
       $this.prev().text($prev.data('originalvalue').replace(/\d{1}/g,"X"));
       $this.text('Show');
    }
    else{
       $prev.text($prev.data('originalvalue'));
       $this.text('Hide');
    }
});

```

In the above code I am basically storing the original value using jQuery data method within the span element itself which is used to display the actual value.

Once you click on `Hide`, get the previous span using `prev()` method and set its text with original value replacing all the numbers in it by `X`. Then change the link text from `Hide` to `Show`.

Next when you click on `Show` get the previous span using `prev()` method and set its text with the original value and change the link text from `Show` to `Hide`.

References: **[.prev()](http://api.jquery.com/prev/), [.data()](http://api.jquery.com/jQuery.data/)**
```
function toggleMoney() {
    $('.money').each(function() {
        var $$ = $(this), t = $$.text();
        $$.text($$.data('t') || t.replace(/\d/g, 'X')).data('t', t);
    });
    $('#toggleButton').text($('.money').text().match(/\d/) ? 'hide' : 'show');
}

```

<http://jsfiddle.net/DF88B/2/>