- "¿Cómo hacer un spoiler desplegable?" - Trucos Blogger

El paso siguiente, después de evitar que te copien el texto de las entradas, es preguntarse... ¿Y ahora cómo hago que se puedan ver los spoilers sin necesidad de subrayar el texto? Si te has encontrado en la misma situación que yo... este truco te será útil. También es adecuado cuando deseas poner un fondo de blog distinto del blanco y que tus spoilers sigan siendo invisibles para los "no cotillas".

Pasemos a la acción. Os resalto en rojo el código html que es imprescindible para que el truco funcione, el resto son cosas que yo utilizo para "hacer bonito".

Si queréis seleccionar el código, pulsar aquí.

• Un solo spoiler:

<table border="2" bordercolor="#660000"> <tr><td> <div id="ver_on1"><font size="1"><h1 id="titu"><a href="#" onclick="mostrar1('bloque1')" title="Expandir info">DESPLEGAR SPOILER</a></h1></div><div id="ver_off1" style="display: none"> <h1><a href="#" onclick="ocultar1('bloque1')" title="Cerrar info">CONTRAER SPOILER </a></h1></font></div><div id="bloque1" style="display: none">TEXTO DEL SPOILER</div></td></tr> </table> <script type="text/javascript"> //Ocultar/Mostrar Div's OCULTO="none"; VISIBLE="block"; function mostrar1(blo) { document.getElementById(blo).style.display=VISIBLE; document.getElementById('ver_off1').style.display=VISIBLE; document.getElementById('ver_on1').style.display=OCULTO; } function ocultar1(blo) { document.getElementById(blo).style.display=OCULTO; document.getElementById('ver_off1').style.display=OCULTO; document.getElementById('ver_on1').style.display=VISIBLE; } </script>

En morado os he puesto el texto que podéis modificar a voluntad.

• Dos Spoilers:

<table border="2" bordercolor="#660000"> <tr><td> <div id="ver_on1"><font size="1"><h1 id="titu"><a href="#" onclick="mostrar1('bloque1')" title="Expandir info">DESPLEGAR SPOILER 1</a></h1></div><div id="ver_off1" style="display: none"> <h1><a href="#" onclick="ocultar1('bloque1')" title="Cerrar info">CONTRAER SPOILER 2 </a></h1></font></div><div id="bloque1" style="display: none">TEXTO DEL SPOILER</div></td></tr> </table> <table border="2" bordercolor="#660000"> <tr><td><b> <div id="ver_on2"><font size="1"><h1 id="titu"><a href="#" onclick="mostrar2('bloque2')" title="Expandir info">DESPLEGAR SPOILER 2</a></h1></div><div id="ver_off2" style="display: none"> <h1><a href="#" onclick="ocultar2('bloque2')" title="Cerrar info">CONTRAER SPOILER 2</a></h1> </font></div></b><div id="bloque2" style="display: none">TEXTO DEL SPOILER</div></td></tr> </table> <script type="text/javascript"> //Ocultar/Mostrar Div's OCULTO="none"; VISIBLE="block"; function mostrar1(blo) { document.getElementById(blo).style.display=VISIBLE; document.getElementById('ver_off1').style.display=VISIBLE; document.getElementById('ver_on1').style.display=OCULTO; } function ocultar1(blo) { document.getElementById(blo).style.display=OCULTO; document.getElementById('ver_off1').style.display=OCULTO; document.getElementById('ver_on1').style.display=VISIBLE; } function mostrar2(blo) { document.getElementById(blo).style.display=VISIBLE; document.getElementById('ver_off2').style.display=VISIBLE; document.getElementById('ver_on2').style.display=OCULTO; } function ocultar2(blo) { document.getElementById(blo).style.display=OCULTO; document.getElementById('ver_off2').style.display=OCULTO; document.getElementById('ver_on2').style.display=VISIBLE; } </script>

Como podréis observar, la diferencia entre ambos es que se ha añadido una nueva secuencia "<div>", nombrándola como "2" cuando ha sido necesario, y en el script también se le ha añadido una nueva "}function ocultar2(blo)}".

• Más de dos Spoilers:

Repetir el proceso "n" veces hasta que nos cansemos de poner los dichosos spoilers.


Este código está basado en el que sale en este link, aunque modificado por mi.