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

78

З допомогою кількох рядків javascript, ви зможете легко організувати приховані блоки із змістом, розкриваються по кліку.
Погодьтеся, іноді краще зробити маленький блок прихованого тексту з акуратною клікабельним написом, приховати під нею, наприклад: правила коментування html-код кнопки банера і т. д. Той, кому це дуже потрібно — натисне на виділену напис і все побачить. Немає необхідності постійно тримати на виду у всіх певні дані.

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

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

<span class="tt" onclick="view('t1'); return false">текст текст текст</span>

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

Тут все дуже просто, class=”tt” використовуємо для оформлення фрази(слова) в css, де навішуємо курсор, виділяємо, підкреслюємо якщо потрібно і т. д., з допомогою onclick=”view(‘t1’); return false” прив’язуємося через ідентифікатор t1 до виконуваного js, і до прихованого до пори до часу блоку з вмістом.
В залежності від того, скільки ви будете використовувати прихованих блоків на одній сторінці, вам необхідно змінювати порядковий номер id, тобто t1, t3, t3 і так далі…

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

<span id="t1" class="terms">
Тут розміщуєте будь-який текст, а можете розбавити і картинкою....
</span>


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

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

<script type="text/javascript">
function view(n) {
style = document.getElementById(n).style;
style.display = (style.display == 'block') ? 'none' : 'block';
}

function view(n) {
style = document.getElementById(n).style;
style.display = (style.display == ‘block’) ? ‘none’ : ‘block’;
}

Ось і все, вам залишається тільки визначитися, що ж такого-такого собі приховати від очей користувачів. Длубатися в коді, можете безпосередньо в онлайн-редакторі, та в принципі, там і колупати то нічого))).

Всіх з наступаючим новим роком! Здоров’я, все інше самі добудемо!

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: