Спойлер "Гармошка" на jQuery
Скрипты
Спойлер "Гармошка" на jQueryДелаем спойлер в стиле "гармошка". Принцип работы следующий. Все спойлеры закрыты. При нажатии на одном спойлере, он открывается. При нажатии ни другом - он открывается, первый спойлер закрывается. В общих чертах, на странице будет одновременно открыт только один спойлер.
В основе скрипта лежит фреймворк jQuery. Сворачивание и разворачивание спойлеров будет происходить с анимацией slide.
Как это будет выглядеть на деле, можете увидеть в рабочем примере ниже. Просто щелкайте по ссылкам спойлеров и смотрите на реакцию скрипта.
Пример:
Текст 1
Текст 1
Текст 2
Текст 2
Текст 3
Текст 3
А теперь поставим скрипт на сайт. Если jQuery не подключен на вашем сайте (узнайте на форумах вашей CMS), то его нужно подключить. В теле HEAD страницы пишем это:
Далее, в том же теле HEAD, но ниже объявления jQuery пишем сам скрипт:
$(document).ready(function(){
$('.splLink').click(function(){
$('div.splCont').not($(this).parent().children('div.splCont')).slideUp('normal');
$(this).parent().children('div.splCont').slideDown('normal');
return false;
});
});
</script>
Также, в теле HEAD нужно прописать стиль спойлера:
.splCont{display:none;border:1px solid #cccccc;padding:3px 5px;}
</style>
Можно считать, что основная часть работы выполнена. Теперь достаточно разместить на странице сами спойлеры. Шаблон каждого спойлера должен быть таким:
тут текст, спрятанный внутри спойлера...
</div></div>
Не вкладывайте спойлеры друг в друга. Это может привести к неожиданной реакции скрипта. Для вложенных спойлеров больше подойдет спойлер на основе jQuery.
Блоки спойлера можете размещать в любой части страницы сайта. Они будут работать.
На этом все. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Спойлер "Гармошка" на jQuery
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 12388 |
| Рейтинг: | 4.2/12 |
| Дата добавления: | 2012-03-21 12:46, Среда |
| Добавил: | Szen |
| Теги: | спойлер, гармошка |
Рекомендуем
Дополнительно к Спойлер "Гармошка" на jQuery
Мини-форум
| № 0 | 2012-03-21 12:46 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Спойлер "Гармошка" на jQuery". |
| Гость |
| № 1 | 2012-03-21 13:34 |
| vasilek | Большое спасибо. Прикрутил к своей cms сейчас тестирую на Денвере. Пока всё отлично. Ещё раз спасибо за скрипт. |
| Василий |
| № 2 | 2012-03-27 11:14 |
| vasilek | Хотел ещё спросить по поводу индексации поисковиками скрытого в спойлере. Простой Текст и Описание фото (title - alt) поисковики видят и учитывают или нет ? Стоит оптимизировать скрытый материал для поисковых роботов или нет ? |
| Василий |
| № 3 | 2012-03-27 11:49 |
Szen | vasilek, скрытое в спойлере индексируется и учавствует в поиске точно также, как и обычный контент. Для этого я проводил небольшой тест, который длился около 3-х месяцев. Результаты тут: индексирование сайта поисковиками |
| Szen |
| № 6 | 2012-04-08 18:16 |
| Murat09 | Спасибо большое, получилось!!! И еще один вопрос: можно ли вместо текста заголовка использовать картинку? |
| Мурат |
| № 7 | 2012-04-08 20:33 |
| Szen | Murat09, ага. Тип так: Code <div><a href="javascript://" class="splLink"><img src="тут_ссыль_к_картинке" width="" height="" alt=""></a><div class="splCont"> тут текст, спрятанный внутри спойлера... </div></div> |
| Szen |
| № 9 | 2012-05-24 13:35 |
| domovod15 | привет! у меня есть вопрос 1 по вот этому скрипту http://szenprogs.ru/blog/spojler_quot_garmoshka_quot_na_jquery/2012-03-21-139 . Можешь подсказать, как сделать так чтобы он и принажатии на себя скрывался. Т.е. сейчас текст1 спойлера1 скрывается если нажать на спойлер2. А как сделать чтобы при нажатии на спойлер1(также 2 и 3) повторно он закрывался? заранее благодарен=) |
| Дима |
| № 10 | 2012-12-20 11:38 |
| vasilek | Посмотрел пост №7 но сам ещё не пробовал. Пока просто мысли. Тут недавно заинтересовался таким дизайном Интересует вопрос - Используя этот "Cкрипт гармошка" можно сделать такой диз ? Чтобы слева было Фото а с права заголовок. Красиво оформлено. Это ведь нужно таблицу создавать и дивами ??? |
| Василий |
