Вопрос Спойлер как на megogo

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

Здравствуйте!
Никак не могу найти что-то похожее на этот спйлер. Вот Пример нажмите на СМОТРЕТЬ

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

скорее всего обычный спойлер переделанный под сайт , а вот ссылка в вашей подписи это рекрама

В подписях запрещено:

Использовать баннеры, кнопки, нецензурные выражения, размещать большие картинки.
К изображениям юзербаров применять ссылки с переходом на сторонний ресурс.
Использовать ссылки на сторонние ресурсы.

Форум твоего направления - Правила форума

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

Skrimm, убрал подпись, спасибо!
но все же обычный это как? тут видимо не обойтись без js. При клике чтобы раскрывался контент, только вот как сделать? я в js не особо разбираюсь.

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

Вот почитайте

Пример

А теперь во-вторых, как сделать спойлер для сайта, а точнее как разместить его на сайте? В принципе, все предельно просто. Читаем внимательно, делаем всё как написано здесь и всё будет хорошо. Если вдруг будут проблемы — пишите в комменты.

Поехали. Код, представленный ниже, необходимо разместить между тегами <head></head>, если спойлер будет использоваться на нескольких страницах сайта. Если же нет, то достаточно просто вставить его в тело страницы где будет размещен спойлер (как сделано у меня на этой странице). Итак, код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.spoiler div.name span").toggle(function(){
$(this).parent("div.name").parent("div.spoiler").children("div.text").show();
$(this).parent("div.name").parent("div.spoiler").css("backgroundPosition", " -15px 0");
},function(){
$(this).parent("div.name").parent("div.spoiler").children("div.text").hide();
$(this).parent("div.name").parent("div.spoiler").css("backgroundPosition", " 0 -15px");
});
});
</script>

А заголовок и тело спойлера размещается в следующем коде:

<div class= "spoiler">
<div class= "name"><span>Пример спойлера. Нажмите на ссылку…</span></div>
<div class= "text">Здесь находится текст, изображения или прочий контент.</div>
</div>

В принципе, уже все работает, однако не совсем так, как надо бы. Если вы просто вставите коды, представленные выше, то содержимое спойлера сразу будет открытым. Чтобы избавится от этого «недуга» необходимо в css (каскадная таблица стилей) добавить следующее:

div.spoiler div.text {
display: none;
}

Ну в принципе всё готово! Если вы всё сделали так, как здесь написано, спойлер будет работать без проблем. Если возникли проблемы, пишите!

Все необходимые параметры стилей, прописываем вот здесь:

div.spoiler div.name {список стилей;} //стили для заголовка
div.spoiler div.text {список стилей;} //стили для основного контента
Взято с Спойлер для сайта. Как сделать спойлер на сайте?

[-]

просто попробуйте сделать так

Цитата:

Сообщение от ethan

тут видимо не обойтись без js. При клике чтобы раскрывался контент, только вот как сделать? я в js не особо разбираюсь.

в принципе я могу попробывать это сделать

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

Код HTML:

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.spoiler-body').hide()
        jQuery('.spoiler-head').click(function(){
            jQuery(this).toggleClass("folded").toggleClass("unfolded").nextALL().toggle("slow")
        })
    })
</script>

Код HTML:

<div class="spoiler-head folded">Открыть</div>
<div class="spoiler-body">
текст внутри
</div>

Нашел в инете один спойлер, придал стиль раскрытия, немного изменил под себя, но не помешало бы доработать:
1. Менять надписи "Открыть", "Закрыть".
2. Возможность создавать несколько <div class="spoiler-head folded"></div>
3. Раскрываться сверху, а не снизу.

Знаний нет на это, а в книгах по js нет такого.

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

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
BB код DI - BBCode [spoiler] 1.30 - спойлер на jQuery	noname	BB коды	5	29.11.2015 03:10
BB код VSQ - Spoiler v1.0.5 - спойлер	noname	BB коды	15	19.02.2015 20:58
Вопрос хак резиновости и спойлер ?	Satan	Вопросы по vBulletin 3.х	6	22.06.2011 17:12
Вопрос Установка BB-кода спойлер в Быстрый ответ	westbam	Вопросы по vBulletin 4.х	5	17.03.2011 20:29

ethan #1
30 МГц Пользователь Вес репутации: 0 Регистрация: 25.05.2012 Адрес: Воронеж Сообщений: 43 Сказал(а) спасибо: 1 Спасибок 9 в 9 сообщениях	Спойлер как на megogo - 29.08.2012, 19:10 Здравствуйте! Никак не могу найти что-то похожее на этот спйлер. Вот Пример нажмите на СМОТРЕТЬ