Para usarlo en tu blog sólo basta con poner este código en una entrada cada vez que lo quieras usar:
<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>
Ahí sólo tienes que agregar donde se indica el contenido que quieres ocultar. Si el botón no te gusta mucho puedes leer esta entrada para saber cómo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un botón
En ese caso el código a usar es este:
<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a>
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a>
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>
0 comentarios