click to show number?

**escapedf** · Jul 27, 2012 06:11

hi guys

im trying to recreate the last example (under EDIT) here:
http://stackoverflow.com/questions/6...88244#11688244

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

Tried it here:
http://www.bluecrushdesign.co.za/moc...onenumber.html

what have i done wrong?

**Pullo** · Jul 29, 2012 13:39

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.

HTML Code:

<!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>

**escapedf** · Jul 30, 2012 00:16

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/moc...nenumber2.html

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

**Pullo** · Jul 30, 2012 00:31

Originally Posted by escapedf

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:

HTML Code:

<!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>

**escapedf** · Jul 30, 2012 00:55

thank you so much Pullo!!

User Tag List

Thread: click to show number?

Thread Tools

Display

click to show number?

Bookmarks

Bookmarks

Posting Permissions