Спойлер "Гармошка" на jQuery

Скрипты

Рисунок Спойлер "Гармошка" на jQuery
Спойлер "Гармошка" на jQuery Спойлер "Гармошка" на jQuery
оценка: 4.2 из 5
оценок: 12, отзывов: 19

Делаем спойлер в стиле "гармошка". Принцип работы следующий. Все спойлеры закрыты. При нажатии на одном спойлере, он открывается. При нажатии ни другом - он открывается, первый спойлер закрывается. В общих чертах, на странице будет одновременно открыт только один спойлер.

В основе скрипта лежит фреймворк jQuery. Сворачивание и разворачивание спойлеров будет происходить с анимацией slide.

Как это будет выглядеть на деле, можете увидеть в рабочем примере ниже. Просто щелкайте по ссылкам спойлеров и смотрите на реакцию скрипта.

Пример:

Спойлер 1
Текст 1
Текст 1
Текст 1
Спойлер 2
Текст 2
Текст 2
Текст 2
Спойлер 3
Текст 3
Текст 3
Текст 3

А теперь поставим скрипт на сайт. Если jQuery не подключен на вашем сайте (узнайте на форумах вашей CMS), то его нужно подключить. В теле HEAD страницы пишем это:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>

Далее, в том же теле HEAD, но ниже объявления jQuery пишем сам скрипт:

Code
<script type="text/javascript">
  $(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 нужно прописать стиль спойлера:

Code
<style type="text/css">
  .splCont{display:none;border:1px solid #cccccc;padding:3px 5px;}
</style>

Можно считать, что основная часть работы выполнена. Теперь достаточно разместить на странице сами спойлеры. Шаблон каждого спойлера должен быть таким:

Code
<div><a href="javascript://" class="splLink">Заголовок спойлера...</a><div class="splCont">
  тут текст, спрятанный внутри спойлера...
</div></div>

Не вкладывайте спойлеры друг в друга. Это может привести к неожиданной реакции скрипта. Для вложенных спойлеров больше подойдет спойлер на основе jQuery.

Блоки спойлера можете размещать в любой части страницы сайта. Они будут работать.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Спойлер "Гармошка" на jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:9657
Рейтинг:4.2/12
Дата добавления:2012-03-21 12:46, Среда
Добавил:Szen
Теги:спойлер, гармошка

Мини-форум

1-10 11-19
№ 02012-03-21 12:46
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Спойлер "Гармошка" на jQuery".
Гость
№ 1
2012-03-21 13:34
vasilek
Аватар участника vasilek
Большое спасибо. Прикрутил к своей cms сейчас тестирую на Денвере. Пока всё отлично. Ещё раз спасибо за скрипт.
Василий
№ 2
2012-03-27 11:14
vasilek
Аватар участника vasilek
Хотел ещё спросить по поводу индексации поисковиками скрытого в спойлере. Простой Текст и Описание фото (title - alt) поисковики видят и учитывают или нет ? Стоит оптимизировать скрытый материал для поисковых роботов или нет ?
Василий
№ 3
2012-03-27 11:49
Szen
Аватар участника Szen
vasilek, скрытое в спойлере индексируется и учавствует в поиске точно также, как и обычный контент. Для этого я проводил небольшой тест, который длился около 3-х месяцев. Результаты тут:
индексирование сайта поисковиками
Szen
№ 4
2012-04-08 16:27
Murat09
Аватар участника Murat09
А как можно увеличить размер шрифта заголовки спойлера?
Мурат
№ 5
2012-04-08 17:14
Szen
Аватар участника Szen
Murat09, пропишите свойство классу splLink.
Szen
№ 6
2012-04-08 18:16
Murat09
Аватар участника Murat09
Спасибо большое, получилось!!! И еще один вопрос: можно ли вместо текста заголовка использовать картинку?
Мурат
№ 7
2012-04-08 20:33
Szen
Аватар участника Szen
Murat09, ага. Тип так:
Code
<div><a href="javascript://" class="splLink"><img src="тут_ссыль_к_картинке" width="" height="" alt=""></a><div class="splCont">
  тут текст, спрятанный внутри спойлера...
</div></div>
Szen
№ 8
2012-04-08 21:22
Murat09
Аватар участника Murat09
СПАСИБО!!!
Мурат
№ 9
2012-05-24 13:35
domovod15
Аватар участника 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
Аватар участника vasilek
Посмотрел пост №7 но сам ещё не пробовал. Пока просто мысли. Тут недавно заинтересовался таким дизайном

Интересует вопрос - Используя этот "Cкрипт гармошка" можно сделать такой диз ? Чтобы слева было Фото а с права заголовок. Красиво оформлено. Это ведь нужно таблицу создавать и дивами ???
Василий
1-10 11-19
Учавствовать в обсуждении "Спойлер "Гармошка" на jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким файл-хостингом вы пользуетесь?
Всего ответов: 397
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 2
Гостей: 2
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz