jquery - Click to reveal phone number -
i have directory users phone numbers. don't print entire numbers people don't re-create them. want utilize jquery (or language) hide lastly 4 digits users can click each number reveal total number. also, want reveal number clicked. clicking number automatically close previous one. pls need help. 1 time saw not doing this.
below sample of code works. however, when click on number, reveals numbers in page subscribers. want reveal 1 number 1 @ time. pls help. i'm not @ jquery or javascript.
// <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".flip").click(function() { $(".panel").slidetoggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { text-align: center; } div.panel { widht: 50%; height: 100px; display: none; } </style> </head> <body> <?php foreach($result->result() $row) { echo '<tbody><tr> <td>'.$row->fullname.'</td> <td>'. $row->bloodgroup.'</td> <td><div class="panel"><p>'. $row->phone.'</p></div> <p class="flip">show phone number</p></td> <td>'. $row->phone2.'</td> <td>'. $row->email.'</td> <td>'. $row->city.'</td></tr></tbody>'; } ?> </body> </html> //
i have created jsfiddle might help out example.
basically cuts lastly 4 letters off, puts in array , binds click handler it, can phonenumber belongs , replaces phonenumber original one.
html
<p class="phonenumber">+1 202 224 0173</p> <p class="phonenumber">+1 202 717 0178</p> <p class="phonenumber">+1 202 505 0179</p> <p class="phonenumber">+1 202 645 0183</p> jquery
$(document).ready(function() { var phonenumbers = []; $(".phonenumber").each(function(i) { phonenumbers.push($(this).text()); var newcontent = $(this).text().substr(0, $(this).text().length - 4) $(this).text(newcontent); $(this).bind("click", function() { if ($(this).text() == phonenumbers[i]) { $(this).text(phonenumbers[i].substr(0, phonenumbers[i].length - 4)); } else { $(".phonenumber").each(function(x) { if ($(this).text() == phonenumbers[x]) { $(this).text(phonenumbers[x].substr(0, phonenumbers[x].length - 4)); } }); $(this).text(phonenumbers[i]); } }); }); }); jsfiddle demo
edit: in case want alter p class phone number stored, this:
http://jsfiddle.net/lhslyqyh/2/
jquery
No comments:
Post a Comment