.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Ocultar texto en nuestras entradas

25 jun 2020
 Vamos a aprender hoy con un simple código como podemos poner en nuestras entradas un texto largo y poder ocultarlo fácilmente.



Para ello nos vamos a nuestras entradas y en la edición HTML, ponemos este código y cambiamos lo marcado en rosa por el texto que queramos ocultar.
Quedará de la siguiente forma:



Mostrar / Ocultar ▼▲

<div
class="divspoiler"> <ahref="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 &#9660;&#9650;</a>

</div><div><div
class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar </div></div>


Ahora bien si lo que queremos es mostrar un botón o otro tipo de imágen este será el código:


<divclass="divspoiler"><imgsrc="URL de la imagen" 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';}" />

</div><div><div

class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar


</div></div>

Ahora cambiamos lo marcado en azul por la url de nuestra imagen, y lo rosa por la contenido que queremos ocultar.
Se verá de la siguiente forma.


















No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos