Cómo crear contenido desplegable con html




Holis hoy les traigo un Tutorial para crear contenido desplegable con códigos html, hace poco usé esto en un tema, y les puede ser útil si quieren ahorrar espacio je je je




  Para empezar en el html de tu tema debes colocar entre las etiquetas <head></head> el siguiente código:
<script language=“JavaScript1.2”>

var ns6=document.getElementById&&!document.all?1:0

var head=“display:”“

var folder=”

function expandit(curobj){

folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style

if (folder.display==“none”)

folder.display=“”

else

folder.display=“none”

}

//–>

</script>

Ahora en tu contenido debes colocar lo siguiente que será donde colocarás tu contenido:
<table width="150" height="50" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="100" height="50" valing="top"><center>

<div id="leposts" width="100"><div style="background:#FFBEF1; z-index:2; color:#333; font-family:georgia; font-size:8pt; letter-spacing:-1px; text-align:right; padding: 2px; margin-bottom: 3px; " onClick="expandit(this)">About :)</div>

<span style="display:none;color: #000;font-size:7pt;font-family:verdana" >

TEXTO TEXTO TEXTO <br><br>TEXTO TEXTO TEXTO<br><br>

</span>

<div style="background:#C1BEFF; color:#444; font-family:georgia; font-size:8pt; letter-spacing:-1px; text-align:right; padding: 2px; margin-bottom: 3px;" onClick="expandit(this)">Hola!</div>

<span style="display:none" style=&{head};>

<span style="color: #000;font-size:7pt;font-family:verdana" >

TEXTO TEXTO TEXTO <br><br>TEXTO TEXTO TEXTO<br><br>

</span>

</span>

<div style="background:#EAFFC0; color:#555; font-family:georgia; font-size:8pt; letter-spacing:-1px; text-align:right; padding: 2px; margin-bottom: 3px; margin-bottom:3px;" onClick="expandit(this)">Tags</div>

<span style="display:none" style=&{head};>

TEXTO TEXTO TEXTO <br><br>TEXTO TEXTO TEXTO<br><br>

</span>

<div style="background:#FFDFC2; color:#666; font-family:georgia; font-size:8pt; letter-spacing:-1px; text-align:right; padding: 2px;" onClick="expandit(this)">Busca</div>

<span style="display:none" style=&{head};>

TEXTO TEXTO TEXTO <br><br>TEXTO TEXTO TEXTO<br><br>

</div></span> </td>

</tr>

</table>

-En los códigos donde dicen "background" puedes cambiar el color de fondo, en "font-family", el tipo de letra en "width" el ancho y en "height" la altura.

-Si quieres conseguir códigos para colores puedes ver este  tutorial.

Espero les haya servido ^^

No hay comentarios.

Gracias por comentar :). Los comentarios serán aprobados por la administradora antes de ser publicados.