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

Прогон по твиттеру, постинг в 1500 аккунтов
Постинг в твиттер аккаунты, для ускорения индексации ваших сайтов, сателлитов, дорвеев.

Код
<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 След.
Похожие темы:
Читают тему (гостей: 2, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
12:45 WebVisitor - улучшение и накрутка поведенческих факторов ранжирования вашего сайта. 
09:29 Lottery Partner в поиске партнеров! Самые высокие ставки! 
22:14 АП ИКС 27.03.2020 | Апдейт Яндекс ИКС 27 марта 2020 
21:31 Быстрое продвижение сайта в ТОП Яндекса. Рост трафика и позиций. 
19:15 Продвижение запросов для интернет-магазина - Яндекс Коллекции - 3000 ссылок 
17:36 Какие ещё есть поисковики типа sveta (тайный знак) online 
16:39 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
14:09 Куплю zennoposter pro 
13:52 Трафик на Ваш зайт - целевой - Яндекс.Дзен 
10:48 Продам сайт займы 
08:17 Прогон по личной базе, больше 1000 трастовых сайтов! Продвижение СЧ и НЧ запросов + рост показателей! Гарантии! 
21:27 Накрутка рейтинга Web of trust (mywot) 
20:28 Нужна оценка сайта 
20:17 Продажа быстрых SSH туннелей. Любые страны с гарантией! 
10:57 Ваш сайт блокируют гос органы? Есть решение! 
10:02 Конкурс статей XRumer 2020 
19:03 Что с трафиком? 
15:52 [b]Webvork [/b]- международная товарная СРА сеть с сертифицированными офферами на Европу. 
15:19 Новостной сайт с ноля 
08:45 Вопрос о курсах 
18:19 Plussy - лучшая партнерка для гемблинг