Сегодня мы рассмотрим спойлер (spoiler). Это такой интерактивный элемент на странице сайта, который позволяет временно скрыть часть содержимого страницы для того, чтобы освободить место на странице или для того, чтобы текст и картинки не мешали просмотру основного содержимого.
Ниже приведён пример нескольких видов спойлеров:
1) Простейший спойлер, который просто отображает содержимое по нажатию на заголовок спойлера
Простейший спойлер требует добавления на страницу всего двух элементов. Это JavaScript для сворачивания и разворачивания содержимого:
А также понадобится вставка самого набора контейнеров, которые будут отображать заголовок спойлера, содержимое спойлера и нижнюю кнопку, помогающую свернуть спойлер. Если по высоте он оказался слишком длинным, а прокручивать на самый верх для сворачивания спойлера лень.
И самое главное - не забыть поменять id спойлера и везде, где упоминается цифра 1 на другую, если у вас на странице будет несколько спойлеров. Иначе будет работать только самый первый.
К счастью эта проблема решена у более сложного в программном и дизайнерском смысле спойлера под номером 2.
2) Продвинутый спойлер со стилями оформления, плавным сворачиванием и разворачиванием и возможностью подключения библиотеки, обрабатывающей любое количество спойлеров на странице
Как видите - это очень симпатичный спойлер и абсолютно универсальный! Для начала его работы нужно добавить на страницу простую конструкцию:
Содержимое спойлера, которое нужно скрыть.
</div>
Для корректного отображения дизайна необходимо добавить в таблицу стилей или внутри тега <style> на странице следующие стили:
.spoiler{
font-size: 14px;
border: #c3cbd1 1px solid;
border-radius: 10px;
background: #e9e9e6;
}
.spoilerTitle{
cursor: pointer;
margin: 2px 5px;
}
.spoilerBody{
display: none;
padding: 2px 5px;
background: white;
border-radius: 0 0 10px 10px;
}
.spoilerBottom{
padding: 0 5px;
cursor: pointer;
margin: 0 -5px -2px -5px;
border-top: #c3cbd1 1px solid;
border-radius: 0 0 10px 10px;
background: #e9e9e6;
}
/* Спойлер на сайте КОНЕЦ*/
И наконец для оживления спойлера понадобится подключить JavaScript код с данного сайта <script src="http://school272.ucoz.ru/js/spoiler.js"></script> , а лучше скопировать содержимое файла к себе на сайт, чтобы не нагружать работу этого. Или просто подключить JavaScript код с помощью вставки тега с содержимым:
var spoilers = document.getElementsByClassName('spoiler');
for(var i = 0;i<spoilers.length;i++)
{
var spoiler=spoilers[i];
var title = spoiler.title;
spoiler.title = '';
var text = spoiler.innerHTML;
spoiler.innerHTML = '';
var divTitle = document.createElement('div');
divTitle.className = 'spoilerTitle';
divTitle.innerHTML = title;
divTitle.onclick=function(){
$(this).next().slideToggle(1000);
}
spoiler.appendChild(divTitle);
var divBody = document.createElement('div');
divBody.className = 'spoilerBody';
divBody.innerHTML = text;
spoiler.appendChild(divBody);
var divBottom = document.createElement('div');
divBottom.className = 'spoilerBottom';
divBottom.innerHTML = 'Свернуть';
divBottom.onclick=function(){
$(this).parent().slideToggle(1000);
}
divBody.appendChild(divBottom);
}
</script>JavaScript лучше подключать в самом конце страницы, если у вас нет доступа к редактированию тега HEAD. Потому что, если подключить JavaScript например между двумя спойлерами, то велика вероятность, что второй спойлер работать не будет. Потому что браузер его ещё не успел занести к себе в память. А если добавлять скрипт в тег HEAD, то обязательно надо помещать его в событие window.onload, потому что в противном случае скрипт опять таки выполнится раньше времени и спойлеры не будут разворачиваться.