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

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

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

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