Сьогодні хочу розповісти про простий і, в той же час, досить ефектному способі відображення тексту на сайті. Напевно ви не раз зустрічалися з спойлерами на різних ресурсах, в основному при організації вертикальних випадають меню або приховування / відображення додаткової інформації. Спойлери допомагають не захаращувати станицю, зробити текст більш читабельним і додають інтерактивності.
Спойлер будемо робити на jQuery. Даний варіант передбачає необмежену вкладеність і кроссбраузерность.
Витяг з Wiki:
Чи не правда-ли, досить не поганий ефект? До того ж дозволяє ховати не тільки текст, а й картинки, таблиці, та взагалі практично будь-яку html розмітку.
Як бачите, під спойлером ховається не простий текст, а з html розміткою. Ну що, настав час розповісти, як вся ця краса робиться.
Для початку необхідно в тезі
підключити бібліотеку jQuery і додати скрипт з кодом обробки нашої функції. Ось як це виглядає:Туди ж додаємо опис CSS стилю (або в використовувану таблицю стилів). Тут вже поле для творчості не обмежена. Ось CSS, який використовувався для прикладу вище:
Власне, залишилося в тілі сторінки прописати два
У висновку хочу привести приклад використання вкладеності одного спойлера в інший:
Текст першого рівня вкладеності
А де взяти цей jquery.min.js?
Знайшов оф. сайт jQuery, файл скачав.
Скрипт не працює, не хоче відсувати вниз вміст сторінки, відразу при завантаженні створює пусте поле куди він буде розкриватися при натисканні на заголовок.
Картинку в скрипт запхав 790х1018 - порожня галявина для розкриття спойлера занадто велика.
Взагалі мені потрібно запхати 8 таких картинок в спойлер.
Це інструкція, потрібно щоб читалася прямо на сайті.
Не можу розібратися, роблю ніби все як написано, але нічого не виходить. Допоможіть розібратись.
Якщо скрипт не працює, значить в стилях блоку прописано position: relative ;. Замініть на position: absolute; .
хочу зробити список div'ов, в кожен такий спойлер покласти, проблема в тому що розкривається спойлер пірнає під div який йде після нього. Що можна зробити? z-index не допомагає
замість спойлера - робить рідерект на сторінку де перебуваю
як так не розумію
Вітаю! Підкажіть, як можна поміняти колір рамки в коді? (Тільки освоюю html і не можу зорієнтуватися, де гамма сховалася). У коді css колір знайшла, замінила, але на сайті все та ж помаранчева рамка. (Мабуть в css колір тексту, а не рамки). Ехх.
Вибачте за турботу) Виявилося, що в head два антіполярних коду збереглися. Старий прибрала і колір рамки змінився)))
Величезне спасибі за статтю! Сто років шукала спойлер - текстовий, а не кнопку) І тільки тут робочий попався)))
Як на рахунок індексації тексту захованого в цей спойлер. Пошуковики індексують схованих текст в спойлері?
Доброго дня. Спойлер красивий і а головне робочий. Є одне але: при натисканні на посилання спойлера, здійснюється перехід на сторінку, де знаходиться цей спойлер (сторінка оновлюється) і тільки після цього все працює (спойлер відкривається). В чому може бути проблема?