-->

Mostrar entradas

miércoles, 19 de diciembre de 2007

Expandir/Contraer

Texto que se muestra o se oculta
Para hacer un menú de expandir y contraer, el cual el texto se muestre o se oculte, iremos a nuestra plantilla y buscaremos la etiqueta -/head-, y justo antes insertaremos el siguiente código:
<script src='http://blogdecesar.googlepages.com/switchcontent.js' type='text/javascript'/>

<script src='http://blogdecesar.googlepages.com/switchicon.js' type='text/javascript'>

</script>



<style type='text/css'>



.iconspan{

float: right;

margin: 3px;

cursor:hand;

cursor:pointer;

font-weight: bold;

}



/*Aca color de fondo, letra y bordes: */



.eg-bar{

background-color: #C3000D;

color: #FFFF99;

font-weight: bold;

border-top: 2px solid #FDCD09;;

border-left: 2px solid #430802;;

border-right: 2px solid #430802;;



padding: 3px;

}



</style>


el siguiente paso es ir a añadir un elemento de página -HTML-Javascript-e insertar este otro código. En este caso esto quedará visible en nuestra sidebar o barra lateral; en el caso que se quiera poner en un post, este último código tendría que ir a una entrada:
<table border="0" cellspacing="0" cellpadding="0" style="width: 400px;">



<tr><td class="eg-bar">

<span id="faqtable1-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>

TITULO

</td></tr>

<tr><td>

<div id="faqtable1" class="icongroup2">

CONTENIDO

<tr><td class="eg-bar">



<span id="faqtable2-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>

TITULO

</td></tr>

<tr><td>

<div id="faqtable2" class="icongroup2">

CONTENIDO

</div></td></tr>

<tr><td class="eg-bar">



<span id="faqtable3-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>

TITULO

</td></tr>

<tr><td>

<div id="faqtable3" class="icongroup2">

CONTENIDO

</div></td></tr>



</table>



<script type="text/javascript">

var faqtable=new switchicon("icongroup2", "div") //Limit scanning of switch contents to just "div" elements

faqtable.setHeader('<img src="http://godlike.cl/up/im/33/minus.gif"/>', '<img src="http://godlike.cl/up/im/33/plus.gif"/>')

faqtable.collapsePrevious(false)

faqtable.setPersist(true, 7)

faqtable.init()

</script>

0 comentarios:

 
ir arriba ir arriba