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é?

Como Criar um spoiler

2 comentários em “Como Criar um spoiler”

Deixe um comentário Cancelar resposta