Esconder textos

Fala aí gente, aqui é o Henrique e hoje venho trazer mais um tutorial pra vocês! E dessa vez venho trazer um script bem bacana.. até o momento consegui fazer um menu expansível e consegui esconder textos. É só usar a cabeça pra fazer coisas legais com ele, enfim, vamos la!


DEMONTRAÇÃO




 Vamos começar inserindo o script no seu HTML, acima de "</head>" cole o seguinte código:

<style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write(&#39;<style>.texthidden {display:none} </style>&#39;);</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className==&quot;shown&quot;) {whichpost.className=&quot;texthidden&quot;;}else {whichpost.className=&quot;shown&quot;;}}</script>
<style type='text/css'>
#dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#F06214 url() repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#000000;
background:transparent url() repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
background:#ffffff url() no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#805E5E url() no-repeat top right;height:33px;}
</style>

 Pronto, agora vou passar o código para "esconder" os textos. Você pode usá-lo no HTML das postagens ou em um gadget.

<a href="javascript:void(0);" onclick="expandcollapse('esconder01')">Clique para expandir!!</a>
<div id="esconder01" class="texthidden">
SEU TEXTO AQUI
</div>

 Note as partes tem negrito. Elas indicam que tem de serem iguais, mas se for usar mais de uma vez o código, é importante que troque-as, por exemplo:

<a href="javascript:void(0);" onclick="expandcollapse('esconder01')">Clique para expandir!!</a>
<div id="esconder01" class="texthidden">
SEU TEXTO AQUI
</div>

<a href="javascript:void(0);" onclick="expandcollapse('esconder02')">Clique para expandir!!</a>
<div id="esconder02" class="texthidden">
SEU TEXTO AQUI
</div>

 Ao deixar dois ou mais códigos com a mesma ID apenas um irá funcionar.

 Você também pode usar uma imagem ao invés de uma frase indicando o trecho escondido. O código fica assim:

<a href="javascript:void(0);" onclick="expandcollapse('esconder01')"><img src='LINK DA IMAGEM'/></a>
<div id="esconder01" class="texthidden">
SEU TEXTO AQUI
</div>

Se gostou, COMENTE :D

Fonte e creditos ao site design on Brasil