Как показать и скрыть текст на JavaScript

« Предыдущая запись
 
  Следующая запись »
 

20038705image.tcsjmadg Как показать и скрыть текст на JavaScriptВ данной статье с одной стороны вы ничего кардинально нового не вычитаете. Однако  есть причина почему я всё же пишу на тему это примитивной вещи. Во-первых - её необходимо помнить всегда. А во-вторых - когда-то давно я увидел простой и интересный пример её реализации.

На сайте, с очень приятным дизайном, требующим минимализма, была страница "О компании". К несчастью на ней было очень много текста, который растягивал страницу и в итоге всё смотрелось не так красиво. Выход был найден простой - часть текста скрывалось и по нажатию кнопки "читать далее" появлялось его продолжение.

В реализации это выглядело следующим образом:

<div id="h0">
   <p>Какой-то текст.</p>
   <a href="#" onClick="document.getElementById('h0').style.display='none';document.getElementById('h1').style.display='';return false;">Читать далее  »</a>
</div>     

<div id="h1" style="display:none">
    <p>Какой-то текст.</p>
    <p>И продолжение текста</p>
    <a href="#" onClick="document.getElementById('h1').style.display='none';document.getElementById('h0').style.display='';return false;"><< Скрыть взад</a>
</div>

Создаётся два контейнера. В первом находится первый абзац статьи и ссылка "Читать далее", а во втором - весь текст, при этом второй блок изначально скрыт. По ссылке "Читать далее" происходит вызов события onClick, который ищет по идентификаторам контейнеры и сменяет им видимость через display -  свойство CSS.

Примитив? Ещё какой! Однако важный и забывать про него не стоит. Единственное, что мне не нравится в примере, то что в коде будет два одинаковых абзаца. Впрочем можно и без них обойтись, а схема работы в принципе будет такая же.

Однако если пользовать такую схему на всём сайте, то каждый раз писать такие длинные строки ведь надоест, не так ли? Для этого можно написать функцию, которой будет передаваться только два имени - блока, который надо скрыть, и блока, который надо открыть. Функция будет выглядеть следующим образом:

<script type="text/javascript">
function change_visibility (block_4_close, block_4_open) {
    document.getElementById(block_4_close).style.display='none';
    document.getElementById(block_4_open).style.display='';
}
</script>
Итак, мы создаём свою функцию change_visibility. Затем двумя строками мы меняем видимость. Обращаю внимание, что если в предыдущем примере после каждой строки мы писали return false, то здесь этого не нужно.
<div id="r0">
   <p>Какой-то текст.</p>
   <a href="javascript:change_visibility ('r0', 'r1')">
      Читать далее»
   </a>
</div>
<div id="r1" style="display:none">
    <p>Какой-то текст.</p>
    <p>И продолжение текста</p>
    <a href="#" onClick="change_visibility ('r1', 'r0')">
       «Скрыть взад
    </a>
</div>

Код выглядит теперь покороче. Обращаю внимание на 3 и 10 строки. Это два варианта различного вызова жабаскрипта. Принципиально разницы между ними вроде как никакой, поэтому вот вам на вкус и на цвет=).

И напоследок мини-бонус. Если переписать функцию с использованием библиотеки jQuery, то выглядеть это будет так:

function change_visibility (block_4_close, block_4_open) {
   $(document).ready(function(){
       $('#'+block_4_close).css('display','none');
       $('#'+block_4_open).css('display','');
       return false;
   });
}

Основное отличие, то что идентификаторы нужно писать с решёткой #.

 

Вот и всё. Удачных вам выходных и скорейшего завершения пятницы=).

Примеры можно найти по ссылке, первый из которых без функции, второй - с функцией.

 

 


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 7, средний: 4.86 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 41 на запись

"Как показать и скрыть текст на JavaScript"

  1. Использовал скрипт с такой же функцией, для cайта с входной страницей. Когда на блоге с входной страницей жмешь “войти” блог с входной страницей пропадает, а под ним находится блог с главной страницей, . Фича заключается в том, что и входная страница и главная страница обе находятся на индексной хмтл странице, как бы две в одной. Посмотреть можно здесь http://yvelious.com

  2. Блин, провтыкал. На этом сайте http://slang-rec.com

  3. Хорошая идея. Я бы только повесил ещё эффект жкьюри с плавным исчезновением и появлением блоков, потому что он там очень просится – тогда сайт реально как на флэше выглядит. А вообще интересно сайт получился.
    Я кстати что-то похожее делал, но вот уже с другим уклоном – был сайт, очень нагруженный графикой и скриптами, и грузился он долго и в итоге отрывками показывались страшные картины. В итоге я на время загрузки поставил окошко, идёт загрузка. Вещь очень схожая, просто событие другое – онлоад кажись было.

    (ЗЫ – есть кстати на сайте один баг, типа если кликнул на ссылку и текст передигается, то если во время передвижения кликнешь на другую ссылку, то активной выглядеть будет она, а открыт совсем другой контент. впрочем это конечно придирка и мелочь, но вот=))

  4. О блин, этого я даже и не заметил:) спасиб. Но к сожалению без понятия, как починить этот баг.

  5. Дааа, там надо что-то дополнительное прописывать, чтобы такого не было. У меня есть один скрипт с подобным багом, уверен фишка всё в том же, надо просто сесть и разобраться, а времени нет, да и надобности пока тоже=)

  6. Благодарю, очень полезный скрипт

  7. Александр Шуйский
    24/01/2010 at 13:33 Постоянная ссылка Цитировать

    Ю а велкам=)

  8. Николай
    26/03/2010 at 14:27 Постоянная ссылка Цитировать

    Спасибо, такой “примитив” для моих познаний в самый раз :) именно то, что искал.

  9. Пожалуйста=). Всегда стараюсь писать теста как можно более доступнее. Подписывайтесь на РСС, ещё много чего полезного напишу ;)

  10. Александр
    08/04/2010 at 13:59 Постоянная ссылка Цитировать

    Подскажи, а если в одном документе я делаю несколько “спойлеров” то как быть???
    просто дублирование не помогло, работает только одно раскрытие… т.е. когда на вторую ссылку жму раскрыть он раскрывает первую…

  11. дык это, вообще-то написана функция, которой передаётся два парметра – что открыть и что скрыть.
    к примеру возьму третий листинг, скопируй его, и вместо r0 и r1 поставь r2 и r3. у тебя тогда будет работать и блоки раскрытия закрытия r0-r1, и r2-r3

  12. Проблему с передергиванием, где-то видел код, который её устраняет, но не помню где…

  13. Евгений
    15/08/2010 at 14:04 Постоянная ссылка Цитировать

    Приветствую.
    Наткнулся на Вашу статью через поиск, по названию. Но у меня совсем другая задача: надо показать на странице блога текст скрипта, чтобы он только показывался, а не выполнялся. Пока ничего не придумал, кроме вставки изображения со скриншотом. Но хотелось бы, чтобы скрипт был именно текстом, чтобы можно было выделить и скопировать. Может, посоветуете что-нибудь? Платформа BlogSpot.
    С уважением, Евгений.

  14. Добрый вечер!
    Посмотрите на яндексе “Специальные символы HTML”. С их помощью заменить в коде можно всё и он не будет выполняться.А ещё проще открыть, к примеру Dreamweaver и сделать вставку из буфера обмена в область wysiwyg, а потом вручную скопировать код, которые он сгенерирует )

  15. спасибо ) применил код – все работает. единственное – глючит с формами – в скрытый див нельзя поля формы ставить иначе не работают поля(

  16. предлагаемый код для этого не совсем годится, но его под это можно без проблем приспособить: какой-нибудь ссылке задаём ИД, по клику на которую ссылка прячется, а на её месте возникает нужный элемент формы. при этом если не кликать на ссылку, поле будет существовать, просто с пустым или предварительно заданным значением

  17. Спасибо!
    Очень полезный и такой нужный скрипт!
    Сама написать не смогла (запуталась в функциях), так что порадовалась вашему! Ура!!!

  18. Рад, что оно оказалось полезным =)

  19. Еще вопрос от новичка: а что делать, если у меня 10 блоков, которые нужно скрывать-раскрывать в разных комбинациях?
    (варианты: “показать только блоки 1 и 10 (по умолчанию)”, “показать только блок 2 (3, 4… 9)”, “показать блоки 2-9 (т.е. все, кроме 1 и 10)”.

    Логика подсказывает, что должен быть какой то способ вызывать функцию, указывая, какие блоки показать, а какие – скрыть. Но как? (М.б. две функции – одну на показать, другую на скрыть? но getelementbyid все равно не умеет обрабатывать больше одно id – или нет?)

    Большое спасибо заранее

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

  21. Тогда надо вызывать функцию, в которой указаны все необходимые комбинации

    Ээ… а как? В этом и заключается мой вопрос :-(

    У меня в итоге получается 17 блоков и три разных функции:
    а) открыть блоки 1 и 17, закрыть все остальные
    б) закрыть блоки 1, 16 и 17, открыть все остальные
    в) открыть один определенный блок (как передать его id в функцию?), и блоки 2 и 16, закрыть все остальные.

    Проблем две:
    а) как передать в функцию id блока?
    б) как указать “совершить действие для всех, кроме указанных выше”? (при этом оно все равно должно касаться только блоков, имеющих id от 1 до 17)

  22. Нужно строить функцию по системе if-else.
    Всем блокам помимо id можно задать доп.параметр (к примеру, у тега a есть параметр rev), в котором будет храниться информация открыт блок или закрыт (к примеру, значения open и close). По клику на какой-то закрытый блок, нужно будет закрыть все блоки с параметром open, после чего считать ид блока, по которому кликнули и соответственно открыть необходимые блоки, включая этот. Вот и всё.

  23. Андрей
    14/10/2011 at 12:56 Постоянная ссылка Цитировать

    Александр, Вы или ваши читатели может подскажут

    У меня на сайте присутствует форма поиска которая работает на скрипте
    <script language=javascript src="script/action.js"></script>

    Как запретить возможность пользователям просматривать исходный код файла action.js

  24. первый вариант – закодировать его кодерами типа yuilibrary.com/download/#yuicompressor

    другой вариант – отдавать код js через php и выводить его gzip-ом – ob_start("ob_gzhandler", -1);
    при этом сам пхп можно зендфреймворком закодить и тогда всё под защитой

  25. Андрей
    15/10/2011 at 11:47 Постоянная ссылка Цитировать

    Александр, а можете привести пример кода для php3
    дело в том что я не программист, а просто продвинутый пользователь

  26. тогда не парьтесь и используйте обычный компрессор кода

  27. Подскажите, пожалуйста, как на ucoz скрыть “ДОБАВИТЬ НОВОСТЬ” от гостей ? Ссылка видна гостям и вводит в заблуждение. Оставить лишь для зарегистрированных пользователей. Спасибо

  28. не имею дел с сервисами типа юкоза, так что рад бы помочь, не не могу :)

  29. Используя Jquery можно просто писать так:
    function change_visibility (block_4_close, block_4_open) {
    $(document).ready(function(){
    $(‘#’+block_4_close).hide();
    $(‘#’+block_4_open).show();
    return false;
    });
    }

  30. это да, просто я адаптировал одно из другого и для наглядности оставил так, хотя с шоу и хайд, конечно, разумнее делать.
    спасибо за комментарий =)

  31. это да, просто я адаптировал одно из другого и для наглядности оставил так,

    Понимаю. Но просмотрел комменты – не обнаружил такого решения – решил поделиться. Для новичков будет полезно. :)

  32. полностью поддерживаю, за что отдельное спасибо =)

  33. Сашенька, этот скрипт корректно только текст скрывает/показывает?

    Не поможешь сделать тоже самое с яндекс картой…

    Сделала так:


    <script type="text/javascript">
    function change_visibility (block_4_close, block_4_open) {
    document.getElementById(block_4_close).style.display='none';
    document.getElementById(block_4_open).style.display='inherit';
    }
    </script>

    <div id="main_main"><a href="#" onClick="document.getElementById('main_main').style.display='none';document.getElementById('main2').style.display='inherit';return false;">На карте</a></div>

    <div id="main2" style="display:none;">
    <a href="#" onClick="document.getElementById('main2').style.display='none';document.getElementById('main_main').style.display='inherit';return false;">На карте</a>

    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=AGaFCE8BAAAA1XL8ewIAxERZB3APQfE-03DDZtVia4Rpas0AAAAAAAAAAADBAKr9SOZ55HZLz2OueCUKxdGnXQ==" type="text/javascript"></script>
    <script type="text/javascript">

    YMaps.jQuery(function () {

    var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
    map.setCenter(new YMaps.GeoPoint(37.273688,44.980182), 13);
    var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.273688,44.980182));
    placemark.setIconContent('амвам');
    placemark.description = 'ваивпи амвам';
    map.addOverlay(placemark);
    map.addControl(new YMaps.TypeControl());
    map.addControl(new YMaps.ToolBar());
    map.addControl(new YMaps.Zoom());

    })
    </script>
    <div id="YMapsID" style="width:100%;height:400px;z-index:1;"></div>

    </div>

    Она показывается, но на карте серый фон и ничего не видно. Если без скрипта, то все нормально отображается.. Помоги пожалуйста :)

  34. Добрый вечер.
    Подскажите пожалуйста, можно ли с помощью jQuery или javascript спрятать текст так, чтобы в случае отключения поддержки javascript в браузере, вместе с защитой контента исчезал и сам текст статьи, которую пытаются стащить?
    Спасибо!

  35. Александр Шуйский
    22/05/2014 at 18:07 Постоянная ссылка Цитировать

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

  36. Александр
    21/06/2014 at 20:10 Постоянная ссылка Цитировать

    На jQuery делал описанное и зашел посмотреть как на родном js делается. Тёска, подскажите- отправляю форму jQuery Ajaхом $(#conteine’).load(obrabotchik.php,{form_parameter:param,….})) и были крякозябры в контейнере. Обработал переданные данные в скрипте функцией iconv так как написано что _POST передает данные не в cp1251 (а в utf-8 ) в каждом файле php и html у меня прописан codepage=windows-1251 (удобная кодировка ибо в редакторе вижу сохранённую в файле форму а в других кодировках пурга в редакторе). Короче в Chrome всё нормально а в IE и Firefox даже на кнопках и в возвращенном скриптом тексте знаки вопроса вместо букв. Только Chrom с сайтом нормально работает. vatutino.fd0.ru – подать объявление в газету. Не переводить же сайт на английский. Что делать. И с easyphp из MySQL не мог получить русские поля нормально. Свяжусь с Вами по вопросу как делать облако тегов Вобще я не программист по спец но про SEO слышал и думаю буду разбираться в общем не асенизатор)))

  37. Александр Шуйский
    22/06/2014 at 9:06 Постоянная ссылка Цитировать

    Доброго утра! Уже успел ответить вам на почту )

  38. Доброго времени суток. Два дня искала решение подобной задачки. Вроде, написала правильный код, но он не работал. Решила искать в интернете – всё не то, но Ваша статейка помогла. Спасибо Вам огромное. Вы меня выручили.

  39. Александр Шуйский
    05/10/2015 at 11:00 Постоянная ссылка Цитировать

    Всегда пожалуйста. Обращайтесь =)

  40. И снова пригодился ваш вариант! Пересмотрела кучу кучную, на CSS3 пыталась внедрить что-то похожее – где-то срабатывает, где-то нет.
    А ваш работает везде! Пасибки!

  41. Александр Шуйский
    08/07/2016 at 7:35 Постоянная ссылка Цитировать

    Рад был помочь =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии