domingo, 23 de enero de 2011

¿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í.