Como Criar um spoiler

Bom, respondendo ao Alencar, é assim que eu fiz o esquema do "mais"/"menos" mais...

<html>
<head>
</head>

<style type="text/css"><!--
.spoiler { height: 1px;
width: 1px;
overflow:auto;
border-width:1px;
border-color:black;}
.sspoiler {color: red;cursor:pointer;}
.spanover {color:green; cursor:pointer;}
--></style>

<body>
<span class="sspoiler"
onclick="spoiler('mais...', 'menos...',this,400,'98%')">mais...</span>
<div class="spoiler">
SEU TEXTO AQUI
</div>
</body>



<script language="javascript"><!--
function spoiler(textoabre, textofecha, botao, altura, largura)
{ divelm = botao.parentNode.getElementsByTagName("div").item(0)
altura = altura + ""
largura= largura + ""
with (divelm.style)
if (width == "1px" !width)
{ height = altura + (altura.match(/^\d+$/) ? "px" : "")
width = largura + (largura.match(/^\d+$/) ? "px" : "")
borderWidth="1px"
botao.innerHTML=textofecha
}
else
{ height = "1px"
width = "1px"
borderWidth="0px"
botao.innerHTML=textoabre}}

var spans = document.getElementsByTagName("span")

for(i=0; i<spans.length; i++)
if (spans[i].className=="sspoiler"
spans[i].className=="spanover")
{ spans[i].onmouseover = function()
{this.className='spanover'}
spans[i].onmouseout = function()
{this.className='sspoiler'}

}
//--></script>


</html>

1 - Você adiciona a parte do "style" no inicio do seu template html
2 - Inclua a parte do "javascript" no final do template, para que seja a última coisa a ser executada pelo browser
Escreva o texto a ser escondido no lugar onde está o "SEU TEXTO AQUI", que deverá ficar dentro de uma DIV de class="spoiler"
3 - o texto "mais" e o texto "menos" deve ficar numa span, como no exemplo...

Simples né?

2 comentários:

  1. Pow cara eu sou maior noob nisso, mas parece ter errro no seu script! da uma olhada ae ! vlw!

    ResponderExcluir
  2. ele funciona.... no IE e no firefox pelo menos

    ResponderExcluir