CSS:
<style type='text/css'>
.spoiler { border: 1px #000 dashed; }
.spoiler legend { padding-right: 5px; }
.spoiler legend input { width: 30px; }
.spoiler div { margin: 0px; overflow: hidden; height: 0; }
</style>
SCRIPT:
<script type='text/javascript'>
function vku_spoiler( id )
{
if ( document.getElementById( id ).style.height == 'auto' )
{
document.getElementById( id ).style.height = 0;
document.getElementById( id ).style.padding = 0;
document.getElementById( id + '_button' ).value = '+';
}
else
{
document.getElementById( id ).style.height = 'auto';
document.getElementById( id ).style.padding = '10px';
document.getElementById( id + '_button' ).value = '-';
}
}
</script>
En Entradas:
<fieldset class="spoiler"><legend style="color: red;"><input onclick="vku_spoiler('Vercontenidooculto2')" id="Vercontenidooculto2_button" value="+" type="button"> Ver contenido oculto</legend><div style="padding: 0pt; height: 0pt;" id="Vercontenidooculto2">CONTENIDO</div></fieldset>
Ir cambiando: Vercontenidooculto, Vercontenidooculto1, Vercontenidooculto2, etc...
Queda asi:
0 comments:
Post a Comment