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


Как в HTML показать и скрыть текст по нажатию на ссылку?

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

Приемы HTML

Приемы HTML

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

Решил я как-то, замутить такую фишку, на странице об авторе, где идет надпись email, добавить ссылку показать, по нажатию на которую собственно и показывался мой email, и тут же появлялась ссылка спрятать, и соответственно email прятался. Ну согласитесь прикольно.

Есть в HTML такое событие onclick, которое возникает по нажатию левой кнопкой мыши на какой-нибудь элемент, при условии, если к нему и добавлен данный атрибут.

В качестве примера приведу следующий код:

<div>

 <a href="#" onclick="alert('Все работает!')"> Жми суда! </a>

</div>

В итоге должно получиться вот так:    Жми суда!

Теперь необходимо создать два элемента, условно назовем их show и noshow, и обращаться будем к ним через метод объекта (а у объектов есть свойства и методы:) document. И этот метод называется getElementById . Этот метод будет делать ссылку на div-ку документа. А дивок (элементов) как уже писалось выше два. В итоге должен получиться вот такой код:

<div id="noshow">

  <b>Мой email </b>

<noindex>

  <a style="text-decoration: none; font-size:15px;"

  onclick="document.getElementById('noshow').style.display='none';

  document.getElementById('show').style.display='';

  return false;" href="#" rel="nofollow">

  показать: </a>

</noindex>

</div>

<!—второй элемент show который и показывает email—>

<div id="show" style="display: none;">

  <b>Мой email </b>

<noindex>

  <a style="text-decoration: none; font-size:15px;"

  onclick="document.getElementById('show').style.display='none';

  document.getElementById('noshow').style.display='';

  return false;" href="#" rel="nofollow">

  спрятать: </a>

</noindex>

  <b>dmitry.ivanof@gmail.com</b>

</div>

Функция getElementById использует обращение к объектной модели документа (DOM) т. е. getElementById является  методом объекта document, который возвращает ссылку на определенный узел документа, после чего эту ссылку можно успешно использовать для изменения свойств и методов обращения к узлу.

Пример работы с методом getElementById, можно посмотреть в статье о защите текста сайта от копирования с помощью JavaScript, в которой я показываю, как можно добавить в буфер обмена дополнительный текст, который будет вставляться вместе с остальным скопированным текстом.

В общем очень интересная, рекомендую почитать, как молодым так и продвинутым веб мастерам.

Если хотите добавить на WordPress данный код, то просто копируете его и вставляете в HTML редакторе WordPress, и соответственно меняете параметры которые необходимо показать/скрыть.

Специально, что-бы не вводить в заблуждение поисковых роботов, ссылки заключил в </noindex> и rel=nofollow.

Конечный вариант того, как работает данный код HTML, можно посмотреть на странице Об авторе.