Как сделать автозакрытие cпойлера?
Страницы: 1 2 След.
Как сделать автозакрытие cпойлера?, Спойлер гонит когда открываются не в один а несколько,как сделать чтоб он при открытие второго первый закрывался
world-muz.ru/versus    вот здесь спойлеры для примера
Цитата

<script>
$(document).ready(function () {
$(document).on("click", ".sp_button", function () {
spoyler(this);
});
});

function spoyler(obj) {
var spoil = $(obj).parent().parent(".spoil");
var he = spoil.find(".sp_text").innerHeight() + 60;

if (spoil.height() == 24) {
$(obj).text("Свернуть");
spoil.stop(true).animate({ height: he + "px" }, 200);
} else {
$(obj).text("Развернуть");
spoil.stop(true).animate({ height: 24 + "px" }, 200);
}
}
</script>

Цитата

<div class="spoil">
<div class="sp_top">
<span class="sp_span">Текст заголовка</span>
<button class="sp_button">Развернуть</button>
</div>

<div class="sp_text">

Текст или то, что душе угодно! =)

</div>
</div>
Код
<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 пишет:
Код
 <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 пишет:
Что-то неработает
Посмотрите рабочий пример: _http://coder.hol.es/archive/spoilers_jq_alterna­te
Цитата
Coder пишет:
Цитата
rwstalker ww пишет:
Что-то неработает
Посмотрите рабочий пример: _coder.hol.es/archive/spoilers_jq_alterna ­te
пишет на сайте вирусы и не заходит
Цитата
rwstalker ww пишет:
пишет на сайте вирусы и не заходит
Что я могу сказать - вирусов там нет - а то, что некоторые проги не воспринимают бесплатные домены на бесплатных хостингах - это есть. Сайт чист.

Ссылка на собственно пример: coder.hol.es/example/js/spoiler_jq_alter­nate/
Изменено: Coder - 12 Декабря 2013 18:20
Цитата
Coder пишет:
Цитата
rwstalker ww пишет:
пишет на сайте вирусы и не заходит
Что я могу сказать - вирусов там нет - а то, что некоторые проги не воспринимают бесплатные домены на бесплатных хостингах - это есть. Сайт чист.


Ссылка на собственно пример: coder.hol.es/example/js/spoiler_jq_alter ­nate/
Цитата
Может я что то не так поставил
Цитата
rwstalker ww пишет:
Может я что то не так поставил
Посмотрите - может быть, нужно убрать с кода подключение jquery - наверняка она у вас уже подключена. Блок css лучше поставить перед </head> - остальное - между <body></body>

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

Должно работать.
Цитата
А мой улучшить можно чтоб сворачивался?
Цитата
rwstalker ww пишет:
А мой улучшить можно чтоб сворачивался?
Не смотрел - но, как правило, обычно можно многое - на это нужно время и возможности...
Цитата
еще вопрос можно
Цитата
Цитата
<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>   
Цитата
как сделать чтоб при нажатие на картинку по ссылке переходила
Цитата
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 пишет:
в команду хочешь?
Команду кого/чего?)
Цитата
Это мой сайт,поисковик,нестандартный,на заказ делал,вместе развивать поднимать и прибыль так же
Страницы: 1 2 След.
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
16:15 Partners.House - платформа по монетизации push-трафика со всего мира 
15:28 Adtrafico - Правильная партнёрская сеть под бурж трафик 
15:21 Рапида умерла. Куда выводить с AdSense? 
13:23 robots.txt запрет пагинации 
11:38 Marketcall - международная партнерская сеть с оплатой Pay Per Call и LeadGen 
11:26 Беда с внешними ссылками 
11:23 В cy-pr есть API? 
16:59 [eBucks] Автоматический обмен криптовалют. BTC и любые альткоины. Киви, Банковские карты и др. электронные системы. 
15:49 Belurk — высокоскоростные анонимные прокси от 0,24 рублей 
13:54 Вечные ссылки с ТОПОВЫХ ресурсов! Размещение вечных трастовых ссылок с тИЦ от + 1000 до +45000 
13:43 Качественный прогон Хрумером, Zennoposterом всего 10 WMZ, Большой опыт работы. Статьи, комментарии, профиля, гостевые. 
13:20 Мобильные и Резидентные Прокси Для Соц Сетей | 3 Гб Бесплатно 
12:40 USMobileSMSBot - 
11:46 Статейное продвижение Вашего сайта-вечные ссылки в статье/обзоре всех тематик на СДЛ от 70 руб-своя соц сеть 
16:59 Email рассылка 
15:07 Курс доллара упал ниже 85 рублей 
14:26 Википедию могут заблокировать 
13:59 Бог есть... 
13:57 Спойлер на 2024: "Зомби-вирус" 
12:18 С юмором по жизни! 
11:43 Площадки, продавцы Дзен каналов