¿Cómo hacer un spoiler desplegable?

• 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>

• 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>

Para volver a la entrada original pulsar aquí.