Click to show number?

JavaScript
1

hi guys

im trying to recreate the last example (under EDIT) here:
http://stackoverflow.com/questions/6334751/jquery-show-and-hide-last-4-numbers-of-a-phone-number/11688244#11688244

looks simple enough but i dont know what i am missing?

Tried it here:
http://www.bluecrushdesign.co.za/mocality/phonenumber.html

what have i done wrong?
:frowning:

2

You are missing the call to the .ready() method, which will (as the name suggests) make your code fire as soon as the DOM is ready.
As it is, your code just sits there and does nothing, because it is never called.

I think this is what you’re after.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#number').toggle(function() {
        $(this).find('span').text('XXXX');
      }, function() {
        $(this).find('span').text($(this).data('last'));
      }).click();
    });
  </script>
</head>

<body>
  <p>Click the number to reveal:</p>
  <div id="number" data-last="1234">949<span>1234</span></div>
</body>
</html>
3

thanks for the reply!.. much appreciated!
that worked with the 1st number…

if i have a second number on the page…
it doesnt work with the second number…
http://www.bluecrushdesign.co.za/mocality/phonenumber2.html

how do i get it to work with the 2nd number ( and any other numbers i add) to the page?

4

That’s not too hard.
The problem with your code now is that you have assigned the id of “number” to two div elements.
However, the id attribute specifies a unique id for an HTML element, i.e. you can’t have two elements on the same page with the same id.
To solve your problem, change “id” to “class” and modify the jQuery selector accordingly.

This should do what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.number').toggle(function() {
        $(this).find('span').text('XXXX');
      }, function() {
        $(this).find('span').text($(this).data('last'));
      }).click();
    });
  </script>
</head>

<body>
  <p>Click the number to reveal:</p>
  <div class="number" data-last="1234">949<span>1234</span></div>
   <div class="number" data-last="1234">949<span>1234</span></div>
</body>
</html>
5

thank you so much Pullo!!