I used the following.
<!-- show hide phone number -->
<div id="flip" style=" cursor:pointer; background-image: url(
http://www.cheapdeals.ie/images/phone-icon.png); background-repeat: no-repeat; margin-top: 15px; height: 48px; background-color: white; font-size: 16px; font-weight: bold; color: #666;">
<div style="padding-top:12px; background-image:url(
http://www.cheapdeals.ie/images/arrow-down.png); background-position:right; background-repeat:no-repeat; text-align:center;">Show Phone Number</div>
</div>
<div id="panel" style="height: 50px; background-color: white; font-size: 24px; font-weight: bold; color: #666;"><div style="margin-top:10px;"><a href="tel:{$listing_data.mobile|replace:'a:':''|re place:'n:':''|replace:'|':''}">Ph: {$listing_data.mobile|replace:'a:':'('|replace:'n: ':') '|replace:'|':''}</a></div></div>
<!-- show hide phone numbere end -->
I also used the following js.
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
The code uses jquery but Flynax already includes jquery so there was no need to add it.