Hide part of string

Question

Hide part of string

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

1

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

javascript jquery

asked by anonymous 03.01.2018 / 23:09

3 answers

2

You can do this using CSS and jQuery. Just include the numbers in a span with class .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><spanclass="vermais">(79) 98567-1234</span>
<br />
<span class="vermais">(79) 98567-5678</span>

03.01.2018 / 23:37

1

Use a class css to hide part of the number and with jQuery you remove this class (displaying the complete 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><divclass="telephony">
    <span class="truncate">71 1234-5678</span>
    <a href="#">Ver mais</a>
</div>

You can also do without 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>

03.01.2018 / 23:31

How to show the record that was most repeated in the MYSQL table? How do I get a specific column from a .txt file with PHP

score 1 · Accepted Answer

Following is 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><spandata-full="(99) 99999-9999">
  (99) 99999 - <a href="#" onclick="Show(this);">Ver mais...</a>
</span>