Каскадный режим | Линейный режим

Konstantin · 25-10-2011 07:37

Здравствуйте, уважаемые посетители форума! Smile

Прошу помочь новичку в сайтостроении, то есть мне, создать простейший код спойлера. Иногда требуется не показывать полностью какой-то фрагмент текста, поместив его в спойлер - область, которая сворачивается/разворачивается по клику на ключевом слове. Для чего это нужно? Ну, например, чтобы опубликовать текст, который не должен сразу бросаться в глаза, а должен лишь появляться по желанию читателя.

Перерыл всё, что только мог, в Интернете, но элементарного спойлера, который удовлетворял бы следующим требованиям, не нашёл.

Требования простые:

1. Должен быть текстовый заголовок, при щелчке на который текст раскрывается ровно сверху вниз. При этом не должна появляться справа экрана полоса вертикальной прокрутки и из-за этого смещаться блоки на странице. Или полоса может быть с самого начала, но чтобы блочная верстка никуда не сдвигалась.

2. После раскрытия внизу текстового фрагмента должна иметься надпись "Свернуть", при щелчке на которую раскрытый большой кусок текста должен свернуться обратно снизу вверх тем же путем, что и открывался. Сама надпись "Свернуть" тоже должна исчезнуть вместе с текстом. В итоге опять должен быть виден только заголовок.

3. Спойлер должен поддерживать возможность вложения один в другой!!!

Буду очень признателен всем откликнувшимся.

Жду Вашей помощи.

Заранее спасибо! Smile

Brian · 25-10-2011 10:12

В гугл запрос "скрипт спойлера" - полно ответов.

Konstantin · 25-10-2011 11:09

Я искал в Гугле, причем очень хорошо! Есть там спойлеры. Но того, что подходит под все мои описания, не нашел. Поэтому прошу вас помочь.

Brian · 26-10-2011 23:07

(25-10-2011 11:09)Konstantin писал(а): Я искал в Гугле, причем очень хорошо! Есть там спойлеры. Но того, что подходит под все мои описания, не нашел. Поэтому прошу вас помочь.

Может быть вы видели на каком нибудь сайте или форуме в действии такой спойлер как вам надо, дайте ссылку.

Konstantin · 27-10-2011 09:38

Везде спойлеры какие-то навороченные. Простого по оформлению, но удовлетворяющего моим требованиям, не нашел. Можно за основу взять вариант №4 отсюда http://my.opera.com/Serega124/blog/2010/...spoilers#1 но доработать под мои требования. Сейчас там спойлер сворачивается на клике мышью вне его поля. А надо, чтобы он сворачивался на клике по надписи "Свернуть", которая должна быть внизу раскрывшегося текста. И надо, чтобы спойлер позволял вкладывать один в один.

Заранее благодарю за помощь. Smile

Konstantin · 28-10-2011 09:22

Вот, нашел подходящий спойлер и приспособил под свои нужды. Но у него есть огромный недостаток, который не позволяет мне использовать такой спойлер - не понимает вложение одного спойлера в другой. Как это можно исправить? А если всё можно упростить и того же результата добиться без яваскрипта, а проще, то я буду только "за".

Код страницы:

В приложении - сама страница, но без CSS, на который она ссылается и который не стал прикладывать, поскольку он для рассмотрения этого спойлара не принципиален.

Код:

<html>

 <head>

  <title>Название страницы</title>

  <link rel="stylesheet" type="text/css" href="style.css">

 </head>

  <body>

   <div id="main">

     <div id="header">Шапка сайта</div>

     <div id="menu">Меню</div>

     <div id="content">

[b]<script type="text/javascript">

function fade(obj,s,opa) {

        if(s==1) {

        var op=opa+5;

        if(op<=100){

            var ob=document.getElementById(obj);

            if(ob.style.display!="block") {

                ob.style.display="block";

            }

            ob.style.opacity=(op/100);

            if(op<100) {

                setTimeout("fade(\""+obj+"\",1,"+op+")", 20);

                }

            }

        }

        else {

            var op=opa-5;

            var ob=document.getElementById(obj);

            if(op>0){

            ob.style.opacity=(op/100);

            setTimeout("fade(\""+obj+"\",0,"+op+")", 20);

            }

            else {

                ob.style.display="none";

                }

        }

    } 

</script>

<a href="javascript:fade('cont',1,0);"><p>Развернуть спойлер</p></a> 

<div id="cont" style="display:none">

<p>Текст спойлера</p>

<a href="javascript:fade('cont',0,100);">Свернуть спойлер</a>

<hr>

</div>

А тут просто какой-то текст, не относящийся к спойлеру.[/b]

</div>

     <div id="footer"></div>

  </body>

</html>

Каскадный режим \| Линейный режим Хороший спойлер (прячет вспомогательный текст)
Автор	Сообщение