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/)**
```
$('#yourButton').click(function(){
    var saveText = $('body').text();

    $(this).data('oldText', saveText);

    if ($(this).text() == "Hide"){
        $('body').text($('body').text().replace(/\d{1}/, "X"));
        $(this).text('Show');
    }
    else{
        $('body').text($(this).data('oldText'));
        $(this).text('Hide');
    }
});

```

This is kind of a complicated problem actually. You will need to be able to save the state of the text when its in number form so you will be able to toggle back and forth. The above code is untested but hopefully it will give you an idea what you need to do.