Click to show number?

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:

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>

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?

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>

thank you so much Pullo!!