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