Alternativa a Collapse-O-Matic

El plugin de WordPress cuyo nombre es Collapse-O-Matic sirve para insertar textos desplegables, pero a partir de su versión 1.8.5.5 tiene una vulnerabilidad de seguridad de «Cross Site Scripting» (XSS), tienes más información en [este enlace].

En el momento de escribir este post (25 de septiembre de 2023) hace ya más de un mes que fue descubierto el problema (desde el 22 de agosto de 2023) sin que exista ninguna solución.

Buscando otros plugins alternativos a Collapse-O-Matic no he encontrado ninguno que sea liviano, fácil de adaptar y me guste su funcionamiento, he probado varios sin éxito.

Por ese motivo, con la ayuda de Chat GPT he ideado una solución alternativa (usando unas sencillas líneas de código) que no precisa de la instalación de ningún plugin de WordPress y así poder desactivar Collapse-O-Matic por vulnerable.

Para implementar este truco hay que seguir los siguientes pasos:

1.- Insertar el siguiente código CSS al principio de la página, o en tu hoja de estilos, o donde consideres oportuno pero tiene que estar ANTES de los contenidos desplegables.

<style>
.matic { max-height: 29px; overflow: hidden; transition: max-height 0.3s ease; }
.matic strong:hover { text-decoration: underline; cursor: pointer; }
</style>

2.- Insertar el siguiente código JavaScript al final de la página, o en tu archivo de scripts, o donde consideres oportuno pero tiene que estar DESPUÉS de los contenidos desplegables.

<script>
const maticElements = document.querySelectorAll('.matic');
maticElements.forEach(function (element) {
element.addEventListener('click', function () {
const spanElement = this.querySelector('span');
if (this.style.maxHeight) { this.style.maxHeight = null; spanElement.textContent = '▼'; }
else { this.style.maxHeight = this.scrollHeight + 'px'; spanElement.textContent = '▲'; }
});
});
</script>

3.- Añadir la clase ‘matic’ a la etiqueta HTML del contenedor del párrafo (por ejemplo div o p), la flechita ‘▼’ dentro de una etiqueta span y el título visible dentro de una etiqueta strong:

<div class="matic"># <span>▼</span> <strong>¿Qué es Lorem Ipsum?</strong>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</div>

4.- A continuación puedes ver el ejemplo anterior implementado:

5.- Si quieres ver otro ejemplo puedes echar un vistazo al siguiente post de inmokia: [Indice de Excelencia Inmobiliaria]

const maticElements = document.querySelectorAll('.matic'); maticElements.forEach(function (element) { element.addEventListener('click', function () { const spanElement = this.querySelector('span'); if (this.style.maxHeight) { this.style.maxHeight = null; spanElement.textContent = '▼'; } else { this.style.maxHeight = this.scrollHeight + 'px'; spanElement.textContent = '▲'; } }); });