Hide part of string

Question

I need to display only part of the string and when the user clicks on the link show the entire string as the example in the image below.

Answer 1

You can do this using CSS and jQuery. Just include the numbers in one span classy .vermais and the code does the rest:

$(document).on("click",".vermais span", function(){
   $(this)
   .text($(this).data("num"))
   .removeClass("numesc");
});

$(".vermais").each(function(){
   var numtel = $(this).text().split('-');
   var numesc = numtel.shift()+"-<span class='numesc' data-num='"+numtel.pop()+"'>...ver mais</span>";
  $(this).html(numesc);
});

.vermais{
   display: inline-block;
   position: relative;
}

.numesc{
   font-size: .9em;
   cursor: pointer;
   text-decoration: underline;
}

.vermais .numesc:hover{
   color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="vermais">(79) 98567-1234</span>
<br />
<span class="vermais">(79) 98567-5678</span>

Answer 2

Use a class css to hide part of the number and with jQuery you remove this class (displaying the full string).

$(".telephony a").click(function() {
  $(this).parent().find("span").removeClass("truncate");
  $(this).remove();
});

.truncate {
  display: inline-block;
  width: 70px; /* Largura da elemento */
  white-space: nowrap;
  overflow: hidden; /* Esconde o conteúdo que ultrapassar a largura */
  text-overflow: ellipsis; /* Adiciona as reticências */
}

/* Corrige a posição do elemento para ficarem na mesma linha */
.truncate + a {
  vertical-align: top;
  margin-top: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="telephony">
    <span class="truncate">71 1234-5678</span>
    <a href="#">Ver mais</a>
</div>

You can also do without the jQuery

document.querySelector(".truncateAnchor").addEventListener("click", function(){
  this.remove();
})

.truncateAnchor {
  display: inline-block;
  width: 70px; /* Largura da elemento */
  white-space: nowrap;
  overflow: hidden; /* Esconde o conteúdo que ultrapassar a largura */
  text-overflow: ellipsis; /* Adiciona as reticências */
}

.truncate {
  display: none
}

.truncate:target {
  display: block
}

<a href="#telephony1" class="truncateAnchor">71 1234-5678</a>
<span id="telephony1" class="truncate">71 1234-5678</span>

Answer 3

Follow a simple example using Jquery.

function Show(e){
    var span = $(e).closest('span');
    span.html(span.attr('data-full'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-full="(99) 99999-9999">
  (99) 99999 - <a href="#" onclick="Show(this);">Ver mais...</a>
</span>