Как сделать автозакрытие cпойлера?

Как сделать автозакрытие cпойлера?, Спойлер гонит когда открываются не в один а несколько,как сделать чтоб он при открытие второго первый закрывался

rwstalker ww

Сообщений: 52 Регистрация: Мар 2012

12 Декабря 2013 11:50

world-muz.ru/versus вот здесь спойлеры для примера

Цитата

Цитата
<div class="spoil"> <div class="sp_top"> <span class="sp_span">Текст заголовка</span> <button class="sp_button">Развернуть</button> </div> <div class="sp_text"> Текст или то, что душе угодно! =) </div> </div>

Coder

Сообщений: 10174 Регистрация: Мар 2013

12 Декабря 2013 16:08

Код

<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 0 -10px;
    padding: 10px;
    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>

✓ Проверенные скрипты и полезности для сайта

✓ Курсы

✓ Сервис временных ссылок

rwstalker ww

Сообщений: 52 Регистрация: Мар 2012

12 Декабря 2013 16:59

Цитата

Coder пишет:

Код

 <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 0 -10px;
    padding: 10px;
    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>
    
 
Что-то неработает

Coder

Сообщений: 10174 Регистрация: Мар 2013

12 Декабря 2013 17:36

Цитата
rwstalker ww пишет: Что-то неработает

Посмотрите рабочий пример: _http://coder.hol.es/archive/spoilers_jq_alternate

rwstalker ww

Сообщений: 52 Регистрация: Мар 2012

12 Декабря 2013 18:10

Цитата

Coder пишет:

Цитата
rwstalker ww пишет: Что-то неработает

Посмотрите рабочий пример: _coder.hol.es/archive/spoilers_jq_alterna te

пишет на сайте вирусы и не заходит

Coder

Сообщений: 10174 Регистрация: Мар 2013

12 Декабря 2013 18:19

Цитата
rwstalker ww пишет: пишет на сайте вирусы и не заходит

Что я могу сказать - вирусов там нет - а то, что некоторые проги не воспринимают бесплатные домены на бесплатных хостингах - это есть. Сайт чист.

Ссылка на собственно пример: coder.hol.es/example/js/spoiler_jq_alternate/

Изменено: Coder - 12 Декабря 2013 18:20

rwstalker ww

Сообщений: 52 Регистрация: Мар 2012

12 Декабря 2013 18:32

Цитата

Coder пишет:

Цитата
rwstalker ww пишет: пишет на сайте вирусы и не заходит

Цитата
Может я что то не так поставил

Coder

Сообщений: 10174 Регистрация: Мар 2013

12 Декабря 2013 19:08

Цитата
rwstalker ww пишет: Может я что то не так поставил

Посмотрите - может быть, нужно убрать с кода подключение jquery - наверняка она у вас уже подключена. Блок css лучше поставить перед </head> - остальное - между <body></body>

Должно работать.

rwstalker ww

Сообщений: 52 Регистрация: Мар 2012

12 Декабря 2013 19:17

Цитата

Coder пишет:

Цитата
rwstalker ww пишет: Может я что то не так поставил

Цитата
А мой улучшить можно чтоб сворачивался?

Coder

Сообщений: 10174 Регистрация: Мар 2013

#10

12 Декабря 2013 19:19

Цитата
rwstalker ww пишет: А мой улучшить можно чтоб сворачивался?

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

rwstalker ww

Сообщений: 52 Регистрация: Мар 2012

#11

12 Декабря 2013 19:25

Цитата
еще вопрос можно

Цитата

Цитата
<div style="background: url('world-muz.ru/style2.jpg'); width: 240px; height: 110px; border: 0px solid #F6BF15; border-radius: 12px 12px 12px 12px; -webkit-border-radius: 12px 12px 12px 12px; -moz-border-radius: 12px 12px 12px 12px; box-shadow:1px 1px 2px #9B9796; "></div>

Цитата
как сделать чтоб при нажатие на картинку по ссылке переходила

Coder

Сообщений: 10174 Регистрация: Мар 2013

#12

12 Декабря 2013 19:33

Цитата
rwstalker ww пишет: как сделать чтоб при нажатие на картинку по ссылке переходила

Заключите див в тэг <a>:

Код

<a href="#">

<div style="background: url('world-muz.ru/style2.jpg'); width: 240px; height: 110px; border: 0px solid #F6BF15; border-radius: 12px 12px 12px
 12px; -webkit-border-radius: 12px 12px 12px 12px; -moz-border-radius: 12px 12px 12px 12px; box-shadow:1px 1px 2px #9B9796;"></div>

</a>

rwstalker ww

Сообщений: 52 Регистрация: Мар 2012

#13

12 Декабря 2013 19:43

Цитата
в команду хочешь?

Coder

Сообщений: 10174 Регистрация: Мар 2013

#14

12 Декабря 2013 19:53

Цитата
rwstalker ww пишет: в команду хочешь?

Команду кого/чего?)

rwstalker ww

Сообщений: 52 Регистрация: Мар 2012

#15

12 Декабря 2013 19:54

Цитата
Это мой сайт,поисковик,нестандартный,на заказ делал,вместе развивать поднимать и прибыль так же

Похожие темы:

15.03.2021 15:27	Как сделать комменты от ВК "резиновыми"?
20.09.2019 13:24	Как сделать или правильно скопировать скрипт промокода
02.08.2018 16:21	Как сделать круг с линией прогресса jq
17.01.2016 02:53	Сделать чтобы меню dropdown не закрывалось при клике по нему
14.11.2013 12:06	Сделать слайдер jQuery

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
16:33 DreamCash.tl - заработок на онлайн-видео. До 95% отчислений, отличный конверт! 19:52 Profit Pixels - In-House Форекс, Крипто, Трейдинг CPA Офферы \| Еженедельные Выплаты \| CPA до $950 17:55 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 17:04 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 15:43 Adtrafico - Правильная партнёрская сеть под бурж трафик 12:50 Партнерская программа OWNR WALLET 01:46 Настроить поставщиков в программе E-Trade PriceList Importer	20:02 Размещение статей, ссылок и постовых на качественных ресурсах 13:02 Ural-obmen.ru — выгодный сервис обмена 12:52 Obama.ru - безопасный обмен криптовалют и электронных денежных средств 12:51 Expa24.com Обмен Криптовалют. Ввод/Вывод наличные Украина/Северный Кипр/Мир 12:36 Transit-Bit.com - Обмен USDT на IDR, THB, RUB и наличные 11:39 USMobileSMSBot - 18:22 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика	16:42 Видимо, похороны СУПРа уже прошли как-то по-тихому 22:54 Точные прогнозы на футбол 12:48 Каспкрски ОС 11:21 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 14:41 Бесплатный мини-аудит юзабилити и конверсии + технический SEO-аудит в подарок 15:24 Добро пожаловать в цифровой мир... 22:58 У меня дикая просадка по РСЯ за последние 3 суток