Прихований текст (спойлер) за допомогою Javascript

Напевно, найвідоміший приклад використання прихованого тексту, це добре всім відомі «спойлери» на різних форумах. Прихований текст, можна організувати і за допомогою jQuery, і на чистому CSS, кожна техніка має як переваги, так і недоліки. Сьогодні ж, я хочу продемонструвати зовсім крихітний javascript, за допомогою якого дуже просто «сховати під кат» практично будь-яку інформацію у себе на сайті.

І так, у нас є якийсь текст, нам необхідно виділити окреме слово, термін або цілу фразу і зробити їх клікабельними. Для цього достатньо «обнести» потрібне нам слово (фразу) тегом, як у прикладі, або посиланням, використовуючи тег. Багато частіше використовують тег, тут і курсор прописаний, і виділення за замовчуванням, але я так думаю, навіщо нам посилання, які нікуди не ведуть, а намалювати курсор, і виділити будь-який елемент, легко можна за допомогою css. Отже, всередині тексту сміливо користуємося:

текст текст текст

Для прихованого тексту, можете використовувати div-контейнер, або ж, як у прикладі, той самий тег, головне зв'язати його класом з css і не забути правильно вказати ідентифікатор:

Тут розміщуєте будь-який текст, а можете розбавити картинкою.

Як я згадував вище, щоб завести наш «спойлер», відкривати і приховувати на кліку, знадобиться крихітний javascript, розміщений безпосередньо в тілі сторінки, краще перед тегом