How do I display the same phone number from the OLX site?

Question

In OLX, the advertiser’s number is partially visible and only after you click on "See number", and the full number is displayed.

How do I do this in Javascript?

Answer 1

One of the many ways to do this is to keep the full number in an attribute data- and putting this value in place of the "cut" number when the user clicks some button.

Example:

Pure Javascript

document.getElementById('ver-numero').addEventListener('click', function(){
  var telefone = document.getElementById('telefone');
  var numeroCompleto = telefone.getAttribute('data-numero-completo');
  telefone.innerHTML = numeroCompleto;
});

<div id="telefone" data-numero-completo="(51)88991-9889">(51)88991...</div>

<button id="ver-numero">Ver número</button>

With jQuery

Note: I left a version with jQuery because, by the impulse, I wrote first using jQuery.

$('#ver-numero').on('click', function(){
  var telefone = $('#telefone');
  var numeroCompleto = telefone.data('numero-completo');
  telefone.html(numeroCompleto);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="telefone" data-numero-completo="(51)88991-9889">(51)88991...</div>

<button id="ver-numero">Ver número</button>

Answer 2

I know it’s in javascript, but I decided to do it in css :)

.telefone {
  width :90px;
}

.overflow {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; 
  text-overflow:    ellipsis;
}

.overflow:active {
   overflow: visible;  
}

<div class="telefone">
  <p class="overflow">(44) 9 9945-1558</p>
</div>

_{Source: css - text-overflow}

Answer 3

I made an option using only CSS with <label> and input[type="checkbox"]

Just click on the number to show it complete. The cool thing about this technique is that you can easily style the number before and after the click if you wish.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 24px;
}

label {
    width: 120px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background-color: lightcoral;
    text-overflow: ellipsis;
    cursor: pointer;
}
input:checked + label{
    display: inline;
    background-color: lightblue;
}
input[type="checkbox"]{
    display: none;
}

<input type="checkbox" id="teste">
<label for="teste">(31) 9998-9990</label>

Answer 4

This is done by displaying or hiding a div via javascript. In the case of that site you passed just take a look at the code you find the following code:

$("#show_phone").click(function(){
$("#hidden_phone").hide();
$("#visible_phone").show();
...

Take a look in this tutorial