Еще один пример спойлера с плавным открытием и закрытием на jquery

[Admin]

В комментариях к теме Собственный спойлер с плавным открытием и скрытием содержимого пользователь Sergey1917 попросил помочь ему со скриптом с сайта pcvector.net/scripts/accordion/284-spoyler-spoiler.html

Весь код мы копировать конечно с того сайта не станем (зачем разводить плагиат), а выложим только подвергшиеся изменениям части кода.

Итак, CSS оставляем без изменений. А вот для того чтобы открывание спойлера происходило не только кликом по кнопке, а и по всему блоку плюс чтобы спойлер закрывался, при клике на любую свободную область, HTML код и JavaScript код должен будет выглядят вот так:

Код:

<div class="box closed">
    <h2>Заголовок №1</h2>
    <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
    <div class="block">Содержимое спойлера №1</div>
</div>

<div class="box closed">
    <h2>Заголовок №2</h2>
    <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
    <div class="block">Содержимое спойлера №2</div>
</div>

<script type="text/javascript">
$(".box .block").show();
$(".closed .block").hide();

$('div.box').click(function(){
  $(this).toggleClass("show").children('div.block').slideToggle("medium");
  return false;
});

$(document).click(function(){
$('div.hide').removeClass("show").next().hide("medium");
});
</script>

[Sergey1917]

Огромное вам спасибо. Очень выручили. На первоисточнике, где код брал, задавал вопрос, но молчат. Сколько я намучился с этим. Сам пробовал методом тыка (без знания js) - не получилось.
Без этого:
<div class="container">
здесь HTML код
</div><!-- end of #container -->
не отображается первый блок. Вставил в дивы и все заработало. Теперь буду от кнопки избавляться.

---

А можно еще сделать цвет блока открытого и закрытого разными? Или это сложно очень? Хочется довести до идеала.

[Admin]

Насчет <div class="container">, не знаю, может у Вас к нему что-то привязано, а у меня и без него работает.

По поводу смены цвета для открытого и закрытого блока, замените

Код:

$('div.box').click(function(){
   $(this).toggleClass("show").children('div.block').slideToggle("medium");
   return false;
});

на

Код:

$('div.box').click(function(){
  $(this).toggleClass("show").children('div.block').slideToggle("medium");
  if ($(this).hasClass("show")) $(this).children("h2").css("background","#bbb");
  else $(this).children("h2").css("background","#ddd");
  return false;
});

[Sergey1917]

Спасибо Верховный Главнокомандующий! Вы опять выручили. Ваши подсказки мне очень помогли. Не зря у вас такое звание, должности соответствует.

[Sergey1917]

Столкнулся с такой проблемой: В CSS выставлен цвет background. Он соответствует тепеть цвету закрытого блока. И при загрузке/перезагрузке страниц закрытый и открытый блоки идут одним цветом. После клика на каждом блоке - цвета получаются как выставлено в скрипте. Если я в CSS закомментирую background, при загрузке - цвет блока белый. Востанавливаются цвета только после кликания на каждом блоке. И цвета держатся до первого обновления страницы. После чего для востановления цветов блока надо по новой кликать на каждом. Это заметно, если один из блоков по умолчанию открыт, т.е. выставлено на одном или нескольких не <div class="box closed">, а <div class="box">.
P.S. И если блок был настроен открытым, при клике на нем цвет открытого и закрытого меняются местами. Т.е. получается, что в скрипте цвета привязаны не на закрытый/открытый блок, а на 1-й клик/2-й клик. Это можно решить?

[Admin]

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

Короче, как ни старался, в IE все равно глючит, а в Опере все отлично.
Да, и кнопки и стили к ним я тоже сразу убрал чтобы не мешались.

В результате получился вот такой код:

Код:

<style type="text/css">
.box {
     background: #FFFFFF;
     margin-bottom: 20px;
     padding: 0;
     position: relative;
     overflow: hidden;
     border: 1px solid #CCCCCC;
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     -webkit-box-shadow: 0 0 10px #DCDCDC inset;
     -moz-box-shadow: 0 0 10px #DCDCDC inset;
     box-shadow: 0 0 10px #DCDCDC inset;
}

.box h2 {
     font-size: 1em;
     font-weight: 700;
     color: #444444;
     background: #DDDDDD;
     margin: 0 -10px -1px -10px;
     padding: 12px;
     padding-left: 15px;
     padding-right: 45px;
     -webkit-box-shadow: 0 0 10px #DCDCDC inset;
     -moz-box-shadow: 0 0 10px #DCDCDC inset;
     box-shadow: 0 0 10px #DCDCDC inset;
     border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
     -webkit-border-radius: 5px 5px 0 0;
}

.closed h2 { background: #BBBBBB; }

.block { padding:12px; }
</style>


<div class="box">
      <h2>ЗАГОЛОВОК №1</h2>
      <div class="block">Содержимое спойлера №1</div>
</div>

<div class="box closed">
      <h2>ЗАГОЛОВОК №2</h2>
      <div class="block">Содержимое спойлера №2</div>
</div>


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


<script type="text/javascript">
$(".box .block").show();
$(".closed .block").hide();


$('div.box').click(function(){
    $(this).toggleClass("show").children('div.block').slideToggle("medium");
    if ($(this).children("h2").css("background")=="#bbbbbb") $(this).children("h2").css("background","#dddddd");
    else $(this).children("h2").css("background","#bbbbbb");
    return false;
});

$(document).click(function(){
$('div.block').removeClass("show").hide("medium");
});
</script>

[Sergey1917]

Проверил. В Опере, FF и IE7 - одинаково. Открытый по умолчанию блок имеет правильный цвет. При первом клике на нем цвет меняется на цвет закрытого и уже остается постоянным при любом положении - открытый/закрытый и далее не зависит от клика.

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

[Admin]

Хотел как лучше, а получилось как всегда.
Это я к тому, что когда копировал код, привел все коды цветов к верхнему регистру для удобства (#BBBBBB).
А оказывается, что в данном коде для jquery коды цвета #bbbbbb и #BBBBBB чем-то отличаются.

Скопируйте код, приведенный ранее еще раз, я его там поправил.

[Sergey1917]

В Опере, Хроме и FF. До первого клика цвета нормальные. После первого клика на открытом блоке - цвет на всех замораживается (под цвет закрытого).

В IE7. До первого клика цвета нормальные. Открытый блок подсвечивается нормально в любом положении, как и должно быть. А во втором, закрытом (по умолчанию), цвета при клике чередуются, но наоборот. Закрытый подсвечен как открытый, а открытый - как закрытый. Получается, если закрыть оба блока, то подсвечены они по разному.

[Sergey1917]

Столкнулся с неприятным эффектом. Если в открытом окне кликнуть на фото для его просмотра, то после закрытия фото закрывается и спойлер. Наверное, закрытие по клику на содержимом блока сказывается. Придется отказаться от этого и оставить только закрытие и открытие по блоку спойлера. Подскажите, пожалуйста, как оставить только клик по блоку?