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

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


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


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

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

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

Установка скприта.
Для того что установить данный скрипт, нам необходимо зайти на хостинг, это можно сделать через 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 будут одинаковы, то скрипт не будет правильно работать.

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

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

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

Скрипт для отображения топ-комментаторов и как вывести его в sidebar.
Добрый день! В некоторых старых статьях я мельком намекал на то, что если на сайте будет установлено много плагинов, то его работа может существенно ...
Как при наведение на текст вывести дополнительное окно с подсказкой. Уроки 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 уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

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

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