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

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>

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