Несколько спойлеров в одну строку с показом содержимого на всю ширину

[Admin]

Данный скрипт является одной из версий скрипта Собственного спойлера с плавным открытием и скрытием содержимого.

Так как поступила уже вторая просьба с реализацией нескольких спойлеров одну строку, при клике по которым показывалось их содержимое во всю ширину под этими спойлерами, то пришлось придумать новую модификацию.

Собственно, мучить долгими рассказами не будем, а просто выложим код целиком:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
  $(this).parent().children('.spoiler_text').html( $(this).next().html() ).toggle('normal');
  return false;
});
});
</script>


<style type="text/css">
.spoiler_body, .spoiler_text {display:none;}
.spoiler_links {cursor:pointer;}
</style>

<div>
<a href="" class="spoiler_links">Спойлер №1 (кликните для показа/скрытия)</a>
<div class="spoiler_body">
  Текст под спойлером<br>
  плавно появляется<br>
  и плавно исчезает<br>
  при клике по спойлеру
</div>

<a href="" class="spoiler_links">Спойлер №2 (кликните для показа/скрытия)</a>
<div class="spoiler_body">
  А это уже другой спойлер!<br>
  И он находится в одной строке с первым!
</div>

<a href="" class="spoiler_links">Спойлер №3 (кликните для показа/скрытия)</a>
<div class="spoiler_body">
  Ну и третий спойлер<br>
  который располагается в одну строку с предыдущими!
</div>

<div class="spoiler_text"></div>
</div>

Оформить при помощи CSS думаю и сами сможете.
Может, конечно, можно было и получше сделать, но пока только так.

[player]

Доброго времени суток! Уже отписывался в комментариях сегодня, то уже день прошел и все еще проходит модерацию. Попробую тут. В общем, располагается все ок, но не работают сами спойлеры. В FF просто перезагружается страница при нажатии на спойлер а в IE вообще переходит на главную. Изначальный код отсюда:
http://usefulscript.ru/spoiler_smooth_opening.php
Работал нормально. Сайт на ucoz если что.

[Admin]

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

По скрипту...

При копировании на форум в строчке

Код:

$(this).parent().children('.spoiler_text').html( $(this).next().html() ).toggle('normal');

В слове toggle закрался служебный символ (в браузере его не видно, а вот в редакторе кода появился), из-за него и не работало...

Уже все поправил и проверил. Замените приведенную строчку или весь код целиком.

[player]

Огромное спасибо! Все работает. Еще маленькая просьба. Как сделать чтобы при открытии другого спойлера закрывался тот, который уже открыт? На данный момент если кликнуть на другой спойлер то просто закроется первый. Пробовал добавить вот это:

Код:

$("div[class^='spoiler_body']").hide('normal');

Но не сработало. Было бы классно если бы при клике на тот же спойлер он закрывался (это уже есть) и добавить еще то, что я описал выше.

[Admin]

Добавьте после:

Код:

$('.spoiler_links').click(function(){

строку

Код:

$(this).parent().children('.spoiler_text').toggle(false);

Можно конечно еще поиграться с плавным закрыванием, сменой текста и последующим открыванием спойлера, если конечно надо.

[player]

Спасибо! Эффекты не сильно нужны. И последний (пока что))) вопросик: как сделать, чтобы если пользователь убирает мышку, то спойлер автоматически закрывался обратно? Если такое можно реализовать с возможной настройкой времени то совсем хорошо будет.

[Admin]

Вот, при убирании курсора мышки с заголовка:

Код:

$('.spoiler_links').mouseout(function(){
$(this).parent().children('.spoiler_text').hide('normal');
});

С временем тоже конечно можно, но код будет посложнее и побольше.

[player]

Проверил. А можно сделать, чтобы срабатывало на содержимое спойлера тоже? Т.е. сейчас только на кнопку срабатывает. Мышку ниже на содержимое наводишь, и уже закрывается. Время не нужно.

[Admin]

Тогда используйте вместо предыдущего вот такой код:

Код:

$('.spoiler_links, .spoiler_text').parent().mouseleave(function(){
    $(this).children('.spoiler_text').hide('normal');
});

[player]

Огромное спасибо! Все работает!