маска телефона 2

by avgustre

HTML

<div class="red_one">
  <a href="tel:+7 (999) 123-45-67"><span class="phone_number">+7 (999) 123-45-67</span></a> <span class="phone_number_active show">Показать</span></div>

CSS

.red_one {
  /* vertical-align: middle; */
  display: flex;
  juctify-content: center;
  align-items: center;
  height: 100%;
}

.red_one a {
  color: #fff;
  font-size: 16px;
  background-color: #f72c2c;
  border-radius: 4px 0 0 4px;
}

.red_one a:hover {
  background-color: #e62b2b;
}

.red_one .phone_number {
  color: #fff;
  font-size: 16px;
  border-radius: 4px 0 0 4px;
  padding: 10px;
  transition: all .1s;
  min-width: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red_one .phone_number_active {
  display: flex !important;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  padding: 1px;
  background-color: #f72c2c;
  border-radius: 0 4px 4px 0;
  min-width: 90px;
  padding: 10px;
  cursor: pointer;
}

.red_one .phone_number_active:hover {
  background-color: #e62b2b;
}

JavaScript

jQuery('document').ready(function($) {

  $(function() {
    let holder = $('.phone_number'),
      button = $('.phone_number_active'),
      number = holder.text(),
      symbolsForHide = 7,
      show = () => {
        holder.text(number)
        button.removeClass('show').text('Скрыть')
      },
      hide = () => {
        holder.text(number.replace(new RegExp('(.+).{' + symbolsForHide + '}$'), "$1" + 'x'.repeat(symbolsForHide)))
        button.addClass('show').text('Показать')
      }
    button.click(function() {
      if ($(this).hasClass('show')) show()
      else hide()
    })
    hide();
  });

});