Спойлер "Гармошка" на 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
Категория:Скрипты
Просмотрено:9246
Рейтинг: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:

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

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



Онлайн всего: 3
Гостей: 2
Пользователей: 1

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