title: Click to reveal phone number
body: <p>I have a directory with users phone numbers. I don't what to print the entire numbers so that people don't copy them. I want to use a jquery (or any language) to hide last 4 digits so that users can click each number to reveal full number. Also, i want to only reveal the number clicked. Clicking another number will automatically close the previous one. Pls I need help. All the once I saw are not doing this.</p>
  
  <p>Below is a sample of the code which works. However, when I click on a number, it reveals all the numbers in the page for all subscribers.
  I want to reveal only one number one at a time. Pls help. I'm not very good at jquery or javascript.</p>
  
  <pre><code>//
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  $(".flip").click(function() {
  $(".panel").slideToggle("slow");
  });
  });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  div.panel,p.flip {
  text-align: center;
  }
  div.panel {
  widht: 50%;
  height: 100px;
  display: none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;?php   
  foreach($result-&gt;result() as $row) {
  echo '&lt;tbody&gt;&lt;tr&gt;
  &lt;td&gt;'.$row-&gt;fullname.'&lt;/td&gt;
  &lt;td&gt;'. $row-&gt;bloodgroup.'&lt;/td&gt;
  &lt;td&gt;&lt;div class="panel"&gt;&lt;p&gt;'. $row-&gt;Phone.'&lt;/p&gt;&lt;/div&gt;
  &lt;p class="flip"&gt;Show Phone Number&lt;/p&gt;&lt;/td&gt;
  &lt;td&gt;'. $row-&gt;Phone2.'&lt;/td&gt;
  &lt;td&gt;'. $row-&gt;email.'&lt;/td&gt;
  &lt;td&gt;'. $row-&gt;city.'&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;'; }
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  //
  </code></pre>