ZorNet.Ru — сайт для вебмастера » HTML и CSS » Скрыть часть номера телефона на сайте

Скрыть часть номера телефона на сайте

Скрыть часть номера телефона на сайте
Отличная функция под номер телефона, который по умолчанию на половину скрыт, но при клике на "показать" вы можете его полностью открыть. Делается для того, что занимает много места, хотя если говорить о мобильных номерах. Также будет показано начало, а далее написано "показать" перед ХХХХХХХ - что скрывает остальные цифры.

Здесь не предусмотрена стилистика, но классы прописаны, что можете под них выставит стили в CSS, что сделать более красивое оформление, так как все идет по стандарту.

Так что все можно отлично можете скрыть свой идентификатор номерного абонента, где основном оставляют раздел "о себе" где на официальных ресурсах обязательно прописывают, а здесь просто скрываем половину, которая полностью доступна и откроется вторая часть по вашему клику, еще плюс буде идти указатель виде надписи для действия.

Одним из взаимодействий, которые мы хотим измерить, будет являться, когда пользователи просматривают номера телефонов.

По установке буде выглядеть так:

Как можно скрыть телефонный номер

Приступаем у установке:

HTML

Код
+8 384<span class="uencin_ponug"> 562 259</span> <span style="cursor:pointer;" class="nolva_kepin">показать</span>

JS

Код
jQuery(document).ready(function($){
$.fn.textToggle = function(cls, str) {
return this.each(function(i) {
$(this).click(function() {
var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
return function() {
el.text(arr[c++ % arr.length]);
}}());
})};
$(function(){
$('.nolva_kepin').textToggle(".nolva_kepin","").click();
$('.nolva_kepin').textToggle(".uencin_ponug","ХХХХХХХ").click();
});
});

Нужно подключить библиотеку jQuery

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

На этом установка закончена, как уже говорил, стилей здесь по умолчанию нет, также при открытие любой страницы или сайта, информации виде номера будет скрыта, точнее часть ее.

Демонстрация
2018-10-08 Просмотров: 2801 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 5
prosborkann
prosborkann 2020-04-08 22:121
0
HTML вариант не работает
Kosten
Kosten 2020-04-09 00:072
0
Проверил на другим сервис, все отлично работает, здесь установка не так сложна, возможно библиотека не подключена?

Проверка
prosborkann
prosborkann 2020-04-09 01:113
0
На "WIX" не работает почему-то, перебрал уже кучу вариантов. Нашёл рабочий но теперь хз как цвет шрифта поменять.
Kosten
Kosten 2020-04-09 03:424
0
Можно попробовать под класс в CSS поставить тот оттенок цвета, который вам нужен.

Код
.uencin_ponug{
color: #000;
}
prosborkann
prosborkann 2020-04-09 14:525
0
Спс.
avatar