Спойлер с плавным открытием для okis
При размещение контента на сайтах, может возникнуть ситуация в которой вам потребуется скрыть часть текста под спойлер. Это могут быть большие тексты, таблицы, фотоподборки или же информация интересная лишь узкому кругу людей не обязательная для общего просмотра.
Вариантов создания подобного спойлера можно найти множество. Но сегодня мы рассмотрим один из них, работающий на jQuery и позволяющий плавно открывать содержимое.
1. Подключаем библиотеку jQuery:
Первым делом подключаем библиотеку. Если же у вас она уже подключена ранее делать этого соответственно не нужно. Данный код нужно скопировать и вставить в Настройки - SEO, поле для размещения Мета тегов.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2. Подключаем скрипт:
Скрипт отвечающий за работоспособность и используемые эффекты размещаем туда же.
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).next('.spoiler_body').toggle('normal');
return false;
});
});
</script>
3. Указываем стилевое оформление:
В редактор CSS (Настройки - CSS) прописываем следующие стили для корректного отображения спойлера. При желание и соответствующих познаниях вы можете без труда внести свои изменения во внешний вид спойлера.
.spoiler_body { display:none; font-style:italic; }
.spoiler_links { cursor:pointer; font-weight:bold; text-decoration:none; }
.spoiler_links:hover { text-decoration:underline; }
.blue { color:#3399ff; }
.green { color:#33cc66; }
4. Размещаем на сайте код html:
И после этих несложных манипуляций размещаем код спойлера на странице (через функцию "редактировать HTML"). Естественно заменяя содержимое контейнера на собственное.
<div class="spoiler_links blue">Читать полностью (Открыть / Закрыть)</div>
<div class="spoiler_body">
<p>Текст который вы хотите скрыть, размещаете сюда</p>
</div>