Это спойлер для сайта с плавным открытием и закрытием очень прост в установке и без проблем установился на WordPress. Думаю, что и с другими движками проблем на будет.
Выглядит он эффектнее чем простой спойлер.
Выглядит он так:
Для работы спойлера на сайте должен быть установлен Jquery. Обычно, по умолчанию, он уже установлен. Но если его нет, между тегами <head> и </head> нужно добавить:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
HTML очень простой.
<div> <a href="" class="spoiler_links">НАЖМИ</a> <div class="spoiler_body"> Тут может быть любой HTML </div> </div>
Для работы спойлера этот HTML изменять нельзя, так как в скрипте будет использоваться parentNode и при изменении структуры HTML спойлер просто не будет работать.
А вот собственно и Javascript. Этот скрипт нужно разместить перед спойлером. Если спойлеров на странице несколько, его нужно разместить перед самым первым.
<script type="text/javascript">
jQuery(document).ready(function($) {
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('div.spoiler_body').toggle('normal');
return false;
});
});
});
</script> Чтобы спрятать все спойлеры при начальной загрузке страницы, применяются CSS стили:
.spoiler_body {display:none;}
.spoiler_links {cursor:pointer;} Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More
Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More
Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More
Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More
Установка PostgreSQL на сервер Read More
Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More
View Comments
Не плохо. А как сделать чтобы вместо кнопки был обычный текст?
Убрать со ссылки
class="spoiler_links"
В итоге будет