Как сделать открывающийся текст на сайте?

Иногда бывает нужно спрятать часть данных и отображать их только после клика пользователя. Другими словами, нам нужен переключатель видимости элемента на странице сайта. Сделать это можно, используя JavaScript. В этой статье я хочу привести пару простейших примеров открытия текста на сайте. Первый на чистом JavaScript, второй с использованием библиотеки jQuery.

Открывающийся текст на сайте с JavaScript

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

<div onclick="toggle('test')">Toggle</div>
<div id="test" style="display:none">Example text.</div>

Поясню. Здесь переключатель содержит обработчик события onclick, который срабатывает при клике по элементы. Функцию toggle() нам ещё предстоит написать. Далее идёт элмент с текстом, который по умолчанию скрыт: display:none – и нам его надо открыть, сменив значение свойства display. Как это сделать?

Для решения поставленной задачи я написал следующую JavaScript функцию:

<script>
function toggle(objNameText) {
  var objText = document.getElementById(objNameText);
  if ( objText !== null ) {
    objText.style.display = (objText.style.display == '') ? 'none' : '';
  }
}
</script> 

В качестве параметра, функции передается значение атрибута id элемента с текстом, у которого нам нужно изменить свойство display. В начале мы получаем объект элемента и проверяем его наличие на странице сайта. Если текстовый элемент существует, т.е. не равен null, меняем значение свойства display на противоположенное. В случае если display имеет пустое значение (элемент открыт) мы присваиваем ему значение none (элемент скрыть) и наоборот. Всё просто.

Просмотреть рабочий пример »

Открывающийся текст на сайте с jQuery

jQuery очень хорошая JavaScript библиотека, которая позволяет решить ряд задач гораздо проще и с учётом кросбраузерности. Здесь уже есть реализованная функция toggle(), осталось лишь понять, как её использовать для решения поставленной задачи. В простейшем варианте, это может выглядеть следующим образом:

<div onclick="$('#test').toggle()">Toggle</div>
<div id="test" style="display:none">Example text.</div> 

Поясню. Здесь переключатель содержит обработчик события onclick, который срабатывает при клике по элементы. Функция toggle(), выступающая свойством объекта элемента текста с id="test", по умолчанию, меняет значение display. Всё просто.

Просмотреть рабочий пример »

На этом у меня всё. Спасибо за внимание. Удачи!

Денис
Денис комментирует...

Полезней конечно, когда контент показывается после клика на кнопку соц сети :)

Константин Кирилюк
Константин Кирилюк комментирует...

2Денис ну, это тоже не самая сложная задача. Помню я её даже реализовывал на своём блоге... принцип там идентичный, но с учётом особенностей виджета соцкнопки.

Предприимчивый вебмастер
Предприимчивый вебмастер комментирует...

Во втором варианте получилась смесь jquery и JS. Надо бы разделить HTML и JS код.

Константин Кирилюк
Константин Кирилюк комментирует...

2Предприимчивый вебмастер: jQuery это и есть JavaScript. Во втором, как собственно и в первом, варианте, конечно можно создать и обработчик события, но мне важно было показать суть.

Предприимчивый вебмастер
Предприимчивый вебмастер комментирует...

В курсе, что jquery это и есть JS, но надо же было как то свою мысль донести. В своё время довольно болезненно переходил на jquery, привык по старинке всё подряд писать без разделения разметки и кода.

Константин Кирилюк
Константин Кирилюк комментирует...

2Предприимчивый вебмастер: так можно и без jQueru с разделение разметки и кода писать. Применительно к описанной ситуации, можно сделать, например, такой обработчик события click по переключателю которому добавить атрибу id="tohhle":

document.getElementById('toggle').onclick = function() { toggle('test') }

чистый JavaScript, без jQuery... вариантов много, было бы желание ;-)