Как сделать автозакрытие 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

Сообщений: 10432 Регистрация: Мар 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

Сообщений: 10432 Регистрация: Мар 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

Сообщений: 10432 Регистрация: Мар 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

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

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

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

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

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

rwstalker ww

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

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

Цитата

Coder пишет:

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

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

Coder

Сообщений: 10432 Регистрация: Мар 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

Сообщений: 10432 Регистрация: Мар 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

Сообщений: 10432 Регистрация: Мар 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)

Новые темы	Объявления	Свободное общение
19:51 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 15:31 Adtrafico - Правильная партнёрская сеть под бурж трафик 07:55 Роскомнадзор отказал в регистрации трети блогеров-десятитысячников 07:51 Новая программа монетизации контента VK Видео увеличила доход авторов в 2,5 раза 23:35 Давайте начнем обмен отзывами Google maps 17:41 Цифровые часы - модуль DigitalWatch 23:20 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу.	23:27 Приватные мобильные прокси Украины безлимиты 4g UA Водафон Киевстар Лайф 20:43 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 19:38 Sectormoney.com - быстрый и удобный обменник 14:58 Sapfirex.com - Современный сервис обмена криптовалют 04:34 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 00:22 Продам обменник криптовалюты, а также новый обменник под ключ с обучением. Скидки на скрипты обменника 20:44 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика	01:10 Точные прогнозы на футбол 04:33 Половина скидок на распродажах — фейк 07:53 НейроБабушка наказывает мошенников 19:59 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 19:57 Пятница 13-ое: VK принял радикальное решение и закрыл доступ к порно контенту 14:57 Конгресс США заявил о лабораторном происхождении коронавируса 14:53 Осторожно! Криптовалюта