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

Пользователь · Регистрация: 10.04.2013

Красивый спойлер на jQuery
Разметка HTML

Код HTML:

        <div class="container">
        
            <div class="box">
                <h2>
                    Toggle (переключатель)
                    <span class="l"></span><span class="r"></span>
                </h2>
                <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
                <div class="block">
                    <div class="block_in">
                             Контент 1
                    </div>
                </div>
            </div>
            
            <div class="box closed">
                <h2>
                    Toggle (переключатель)
                    <span class="l"></span><span class="r"></span>
                </h2>
                <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
                <div class="block">
                    <div class="block_in">
                           Контент 2
                    </div>
                </div>
            </div>

CSS

PHP код:



.box {

    background:#fff;

    margin-bottom:20px;

    padding:0;

    position: relative;

    overflow: hidden;

    border: 1px solid #ccc;

    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;

    text-transform:uppercase;

    color:#444;

    background: #ddd;

    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;

}



.block {

    padding:0;

}



.block_in {

    padding:12px;

}



.box div.hide {

display: block;

width: 40px;

line-height: 24px;

position: absolute;

right: 5px;

top: 8px;

cursor: pointer;

font-size: 10px;

text-transform: uppercase;

text-align: center;

border: solid 1px #aaa;

background: #f5f5f5;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-webkit-box-shadow:0 0 4px #DCDCDC inset;

-moz-box-shadow:0 0 4px #DCDCDC inset;

box-shadow:0 0 4px #DCDCDC inset;

}



.box div.hide:hover {

background: #fff;

}



.box div.hide span.h {    display: block;}

.box div.hide span.s {    display: none;}

.box div.show  span.h {    display: none;}

.box div.show  span.s {    display: block;}



.closed div.hide span.h {    display: none;}

.closed div.hide span.s {    display: block;}

.closed div.show  span.h {    display: block;}

.closed div.show  span.s {    display: none;}

javascript

PHP код:



            $(".box .block").show();

            $(".closed .block").hide();



            $("div.hide").click(function(){

                $(this).toggleClass("show").next().slideToggle("medium");

            });

Работаем с jQuery, поэтому не забываем её подключить в шапке.
Cтрочка $(".box .block").show(); - первый блок показывается по умолчанию, то есть развернут;
строчка $(".closed .block").hide(); - второй блок по умолчанию свернут, скрыт.
Можно использовать данный скрипт, как для спойлеров, так и например создания аккордеонов.

Замечательный спойлер, очень понравился. Что надо изменить, чтобы открывался и закрывался кликом по всему блоку, а кнопку с надписями открыть/закрыть убрать?

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
BB код DI - BBCode [spoiler] 1.30 - спойлер на jQuery	noname	BB коды	5	29.11.2015 03:10
Вопрос как сделать чтобы в wordpress не зарегистрированные пользователи не могли смотреть ссылки?	CooLer	PHP	1	17.05.2013 09:49
Вопрос как сделать чтобы в wordpress не зарегистрированные пользователи не могли смотреть ссылки?	CooLer	HTML, CSS	1	22.12.2012 12:26
Вопрос Как сделать, чтобы отображались звания	sparco.1988	Вопросы по vBulletin 4.х	6	04.10.2012 23:29
Вопрос Как добавить правильно BB код , чтобы сделать 2 группу смайликов	dimanger	BB коды	4	29.07.2011 07:52