В статье я делюсь небольшим скриптом, который можно установить на любой сайт и с помощью которого любой фрагмент текста можно сделать скрытым ПОКАЗАТЬ/СКРЫТЬ.

Сделать текст скрытым

Как сделать текст скрытым.


23.08.2014 | Скрипты | Теги: комментариев 15 | 10003 просмотров | Автор статьи: Александр Рус


Всем доброго вечера! На прошлой недели при создании мотивирующей страницы, для того что бы скрыть некуторую информацию, я воспользовался специальным скриптом. Он позволяет показать или скрыть текст.

Коротко говоря это будет выглядеть на примере вот так:
Скрыть/Показать текст

Установка его довольна проста. Сам скрипт длиной всего несколько строчек. Хочу заметить это не плагин, а скрипт, которой никакой нагрузки на блог не окажет.

Установка скприта.
Для того что установить данный скрипт, нам необходимо зайти на хостинг, это можно сделать через FTP-клиент. Найти шаблон вашей темы и там отыскать файл script.js, обычно он находится по адресу /wp-content/themes/Ваш_шаблон/js/script.js. И добавить в самый низ следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 /**
            * Функция Скрывает/Показывает блок 
            * @author ox2.ru дизайн студия
            **/
            function showHide(element_id) {
                //Если элемент с id-шником element_id существует
                if (document.getElementById(element_id)) { 
                    //Записываем ссылку на элемент в переменную obj
                    var obj = document.getElementById(element_id); 
                    //Если css-свойство display не block, то: 
                    if (obj.style.display != "block") { 
                        obj.style.display = "block"; //Показываем элемент
                    }
                    else obj.style.display = "none"; //Скрываем элемент
                }
                //Если элемент с id-шником element_id не найден, то выводим сообщение
                else alert("Элемент с id: " + element_id + " не найден!"); 
            }

Все готово! Теперь при написании статьи можно скрыть любую часть текста. Для того, что бы скрыть текст, необходимо в html-редакторе прописать следующие:

1
2
3
4
 <a href="javascript:void(0)" onclick="showHide('block_id')">Скрыть/Показать текст</a>
        <div id="block_id" style="display: none;">
            Тут любой текст и html код<br/>           
        </div>

Если в статье скрываете 2 фрашмента текста или более, то в каждом фрагменте значение id должно быть разное. К примеру в первом фрагменте id=»block_id», во втором его можно назвать как угодно, например id=»block2″
Если id будут одинаковы, то скрипт не будет правильно работать.

Скрыть можно не только текст, также видео, музыку, картинки, вообщем всё что угодно 🙂
Вот такую дополнительную полезную функцию вы можете сделать на своем блоге. И главное данный скрипт не будет грузит ваш ресурс!

Автор статьи, Александр.

Материалы по теме:

Как скрыть реферальную ссылку
Приветствую всех своих читателей. Давайте рассмотрим, как скрыть свою реферальную ссылку от пользователей. Чтоб при переходе умные пользователи не думали, что помогают, кому то зарабатывать. ...
Как добавить форму комментариев Vkontakte
Всем привет! Недавно, мне поступил заказ от клиента, он хотел, что бы я на его блоге разместил другую форму комментариев. От предложенного мною плагина ...
Виджет YouTube для сайта. Как это сделать.
Создание виджета при помощи html кода. Создание виджета при помощи плагина. Как узнать ID канала Youtube. Создание виджета через сайт Youtube. Всем привет! Сегодняшняя статья посвящается тем, кто ищет ...
Как при наведение на текст вывести дополнительное окно с подсказкой. Уроки HTML.
Добрый день! Друзья, не давно я наткнулся на один буржуйский сайт. Естественно этот сайт посвящен тематикам, которые подходят для наших блогов. Там авторы выкладывают ...
Скрипт для вывода количества просмотров страницы.
Всем привет. Давным давно, когда на этом блоге еще был другой шаблон, у меня в конце каждого поста, отображалось количество просмотров. В результате чего, можно ...

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.

1
Михаил http://mihafilm.blogspot.ru

Да, нужно подумать есть ли что скрыть... 🙄

Александр, а не подскажете сервис для редиректа - это когда старый сайт закрываешь и надо на новый всех перенаправлять. И я даже не про внесение скрипта в код старого сайта, а про интернет-сервис, ведь был же такой - не могу найти сейчас или мне показалось?

Автор2
Александр Рус (участник БКС) http://myworkpro.ru/

не пользовался я ими, не приходилось ещё. Но думаю Google найдет всё 😉

3
Юрий http://bloger-man.ru

Есть мнение что не каждый скрипт НЕ несёт нагрузки и не каждый плагин несёт.

Нормальные плагины, часто обновляемые не нагружают блог как принято у нас считать. Зато при плагинах с обновлениями проблем не возникает.

4
Елена Прекрасная http://prekrasniy-mir.ru/

Да, хороший и удобный скриптик! Иногда очень удобно и симпатично выглядят такие спойлеры, где текст публикуется как дополнение, и если заинтересовало нажать и почитать.

Автор5
Александр Рус (участник БКС) http://myworkpro.ru/

Думаю скрипт лишним не будет

6
Татьяна Сова http://sovuskino.ru/

Интересная функция... Мне понравилась! Только вот теперь, как и у Риты, нужно будет поломать голову, что бы придумать, что спрятать))))). Но ничего, самое главное есть информация, и если она существует, то и найдется что скрыть). Спасибо за статью, Александр! Как всегда легко и понятно изложено, особенно для таких "новичков-чайников" 🙂

7

Спасибо, Александр, все так подробненько и понятно. Теперь вот голову ломай, чего же спрятать то? 🙄

Автор8
Александр Рус (участник БКС) http://myworkpro.ru/

🙂

9
Платон Щукин http://platon-shhukin.ru

Спасибо не знал

10
Антон http://financial-independence.ru

Когда-то мне такой был нужен 😉 в закладки добавлю пригодиться.

З.ы. У тебя шаблон для мобильного плохо оптимизирован. Можешь сделать кнопку переход к обычному виду?

11
Виталий http://insta-for.ru/

Все гениальное просто))). Еще бы кнопочку к редактору прикрутить было бы вообще шикарно 😉

Автор12
Александр Рус http://myworkpro.ru

Ну да, было бы не плохо. Хотя и без кнопочки тоже нормально.

13
Азик http://azikonya.com

Александр, исправь ошибку в названии статьи!)) :mrgreen:

Или это так задумано??))

Автор14
Александр Рус (участник БКС) http://myworkpro.ru/

Ага, увидел и исправил.

15
Андрей http://telets.com.zp.ua/

Классная информация. Спасибо Вам большое. Теперь надо будет подумать что закрывать, а что нет. 🙂

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.