Expander o contraer textos en Wordpress

Si deseamos, que alguna de nuestras entradas o páginas, tengan textos expandibles, al clickar sobre un elemento, haciendo un efecto acordeón, Wordpress nos ofrece un buen y actualizado plugin : Collapse-O-Matic.

collapse-o-matic

El plugin tiene un uso muy sencillo, y está muy bien documentado en la página oficial del plugin, cuyo link os dejado anteriormente.

Su uso se basa en los shortcodes, lo que hace muy agradable su manejo. Sin duda uno de los mejores  y más modernos plugins en esta variante.

Aquí os dejo una demo de como puede quedar, aplicandole algunos estilos. Esta es una página web en la que utilicé este plugin, http://www.actae.elkarteak.net/actividades/

actae-collapse-o-matic

Estos son los estilos aplicados:

/*apariencia del collapse contraido*/

.collapseomatic {
 background-color: #EDF0F2;
 background-image: url("arrow-open.png") !important;
 background-repeat: no-repeat;
 background-position: 10px 15px;
 padding: 8px 30px 8px 46px !important;
 cursor: pointer;
 border: 1px solid #B6B8BA;
 margin-bottom: 10px;
 font-weight: bold;
 font-size: 0.8em;
 }

/*apariencia del contenido del collapse*/
 .collapseomatic_content {
 margin-top: 15px !important;
 margin-left: 0px !important;
 padding: 30px !important;
 border: 1px solid #B6B8BA;
 color: #535353;
 background-repeat: no-repeat;
 cursor: pointer;
 }

/*imagen para contraer el collapse*/
 .colomat-close {
 background-image: url("arrow-close.png")!important;0.6
 }

Aquí os dejo las imágenes de las flechas:

Flecha para abrir

Flecha para cerrar

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *