Реклама на блоге
Контакты
на HTML
На CSS
в PhotoShop
для WordPress
Видеоуроки
Акции и конкурсы
Кроссворды
Сегодня будет представлено три варианта простых спойлеров для сайта без использования дополнительных плагинов, которые можно установить на сайт с помощью html и JavaScript-кодов.
Но для начала скажу, что такое спойлер.
Спойлер — это модуль, представляющий из себя ссылку, строчку, или картинку, нажав на которую можно увидеть спрятанный под ней контент.
Спойлер для сайта
Спойлер может пригодиться в том случае, если на странице сайта большой объем информации, часть которого Вы хотите скрыть. Для WordPress есть отдельные плагины для спойлера, например jQuery Collapse-O-Matic.
Итак, начнем.
Первый тип спойлера имеет формат чекбокса и текста, то есть здесь главный элемент — не ссылка, а «птичка», поставив которую откроется скрытое содержимое.
Для такого варианта используйте код:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style type="text/css">
alt2{ margin: 0px; padding: 6px; border: 1px inset;}
smallfont{margin-bottom:2px;}
spoil{margin:10px; margin-top:5px;} // задаем стили
}
</style>
<div class="spoil">
<div class="smallfont">Показать <input type="checkbox" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Развернуть'; }"/></div>
<div class="alt2">
<div style="display: none;">
Тут будет текст скрытого контента.
</div>
</div> |
Результат:
Следующий вариант спойлера похож на предыдущий, только здесь вместо чекбокса будет использоваться кнопка с текстом «Развернуть».
Для такого варианта используйте код:
5388232512d038c77f8e94bd409cd51a001
И последний на сегодня вариант (самый красивый) — спойлер с использованием jQuery-библиотеки Google.
Здесь мы будем подключать данную библиотеку, используя код
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
Далее вставляем этот код:
1 2 3 4 5 6 7 8 9 | <script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script> |
Далее делаем ссылку на открытие/скрытие спрятанного контента и сам скрытый контент.
Полностью код выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <style type="text/css">
.splCont {display:none; padding:3px 5px;}
a {text-decoration:none; color:black;} // задаем стили
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
<a href="javascript://" class="splLink">
<strong>Показать:</strong></a>
<div class="splCont">
Тут будет текст скрытого контента.
</div>
</div> |
Мы рассмотрели три варианта простых спойлеров для сайта. Можете использовать любой из них по своему вкусу.
Отличные, простые решения. Спасибо!
Всегда пожалуйста, Ольга! Заходите еще!
Отличное решения для того что бы скрыть текст на сайте, слышал только о плагинах, которые позволяют это сделать, но ни как не знал что можно вручную.
А я через плагин сделал…Не получилось у меня…Что-то сделал не так и админка накрылась =) Даже с восстановленным файлом не захотела работать, пришлось за последний бэкап восстанавливать =(
Как это админка накрылась? Для таких спойлеров не надо править php-код. Достаточно прописать его в самой записи/на странице.
Спасибо,у меня было огромное меню-пришлось даже разбить на 3 части,а теперь спрятал в спойлер и все ОК