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

[Sergey1917]

Да, посмотрел. Это то, что я и хотел. Все-таки у вас получилось такой сделать. И в IE7 тоже работает. Жаль только уже успел наверстать много. Придется везде код менять. Вы мастер. Спасибо за хорошую работу!

[Admin]

Спасибо, но я только учусь.
Самому было интересно такое сделать.

[7Lexus]

О, очень круто получилось!
И здесь тоже просится ещё один вариант - открытие/закрытие спойлера поочередно (по принципу аккордеона). И "правило хорошего тона" для спойлера - это меняющийся заголовок в зависимости от состояния (Открыто / Закрыто).
Если можно - покажите наглядно, как это реализовать.
Спасибо!

[Admin]

Я правильно понял, что открытие/закрытие спойлера поочередно (по принципу аккордеона) это тогда когда одновременно может быть только один спойлер и при клике по другому, открытый закрывается?
Если да, то нужно заменить весь javascript код на такой:

Код:

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

$(".title").click(function(){
if ($(this).parent().hasClass("show")) {
    $("div.spoiler").addClass("show").children(".contents").hide("medium");
    $("div.spoiler").children(".title").children(".title_h3").css("background", "#bbbbbb");
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background", "#dddddd");
    }

else {
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background", "#bbbbbb");
    }
});
</script>

С меняющимися заголовками надо подумать. Кстати, заголовки должны быть у всех спойлеров одинаковые или нет? Например, "Открыть" для закрытого и "Закрыть" для открытого. Либо в заголовке должно помимо "Открыть" и "Закрыть" присутствовать еще какое-нибудь уникальное описание содержимого?

[Admin]

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

Вот и код:

Код:

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

$(".title").bind("mouseenter mouseleave", (function(){
if ($(this).parent().hasClass("show")) {
    $("div.spoiler").addClass("show").children(".contents").hide("medium");
    $("div.spoiler").children(".title").children(".title_h3").css("background", "#bbbbbb");
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background", "#dddddd");
    }

else {
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background"," #bbbbbb");
    }
}));
</script>

[7Lexus]

(18.04.2013 22:05:40)Admin писал(а):  Кстати, заголовки должны быть у всех спойлеров одинаковые или нет? Например, "Открыть" для закрытого и "Закрыть" для открытого. Либо в заголовке должно помимо "Открыть" и "Закрыть" присутствовать еще какое-нибудь уникальное описание содержимого?

Из двух последних первый вариант более приемлем. Очень так эффектно происходит смена. Спасибо большое за такое решение!
Второй вариант тоже имеет место быть, наверное, когда спойлеры с небольшим контекстом и не совсем близко друг от друга.
Про "Открыть / Закрыть" - да я это и имел ввиду: у закрытого заголовок "Открыть" и наоборот.
...и напоследок просьба - не забудьте, пожалуйста, про меня ещё в этой теме.
Спасибо!

[Admin]

В таком случае это делается довольно просто:

Код:

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

$(".title").click(function(){
if ($(this).parent().hasClass("show")) {
    $("div.spoiler").addClass("show").children(".contents").hide("medium");
    $("div.spoiler").children(".title").children(".title_h3").css("background", "#bbbbbb").text('Открыть');
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background", "#dddddd").text('Закрыть');
    }

else {
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background", "#bbbbbb").text('Открыть');
    }
});
</script>

[7Lexus]

О! Да! ДА! То что доктор прописал!
Спасибо большое!

[Sergey1917]

Кому, то что доктор прописал, а кому и нет. Эта функция интересная, но не в ущерб основным. Заголовок спойлера то исчезает. А вот если бы надписи открыть/закрыть распологались по правому краю и не удаляли заголовок, вот это бы было здорово. Верховный Главнокомандующий, такой вариант можно сделать?

[Admin]

Сделано.
Долго не отвечал, дела были.

Выкладываю весь код целиком т.к. пришлось внести небольшие изменения, как в стили, так и во все участки кода.

Код:

<style type="text/css">
.spoiler {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #bbbbbb;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -webkit-box-shadow: 0 0 9px #dddddd inset;
    -moz-box-shadow: 0 0 9px #dddddd inset;
    box-shadow: 0 0 9px #dddddd inset;
}

.title_h3 {
    cursor: pointer;
    background: #dddddd;
    margin: 0 -10px;
    padding: 8px;
    padding-left: 20px;
    border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    -webkit-border-radius: 7px 7px 0 0;
    -webkit-box-shadow: 0 0 9px #dddddd inset;
    -moz-box-shadow: 0 0 9px #dddddd inset;
    box-shadow: 0 0 9px #dddddd inset;
}
.closed .contents { display: none; }
.closed h3 { background: #bbbbbb; }

.contents { padding: 10px; }

.open_close {
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
}
</style>

<br><br>
<div class="spoiler">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №1</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера №1</div>
</div>

<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №2</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера №2</div>
</div>

<div class="spoiler closed">
    <div class="title"><h3 class="title_h3">ЗАГОЛОВОК СПОЙЛЕРА №3</h3><span class="open_close">Закрыть</span></div>
    <div class="contents">Содержимое внутри спойлера №3</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">
$(".closed").toggleClass("show").children(".title").children(".open_close").text('Открыть');

$(".title").click(function(){
if ($(this).parent().hasClass("show")) {
    $("div.spoiler").addClass("show").children(".contents").hide("medium");
    $("div.spoiler").children(".title").children(".title_h3").css("background", "#bbbbbb").parent().children(".open_close").text('Открыть');
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background", "#dddddd").parent().children(".open_close").text('Закрыть');
    }

else {
    $(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
    $(this).children(".title_h3").css("background", "#bbbbbb").parent().children(".open_close").text('Открыть');
    }
});
</script>

Правда обнаружился маленький недостаток (в предыдущих кодах он тоже присутствует) - при большом скруглении углов спойлера, блок заголовка не скругляется и его уголки вылезают за пределы спойлера. Это где-то косяк в CSS, но сейчас нет времени это исправить.

P.S. На данный момент спойлер открывается и закрывается при клике по всему заголовку.