Cómo expandir todos los contenidos ocultos (que necesitan un clic explícito para expandirse) en una página web HTML con un solo clic

Primero, hagamos esto con JavaScript simple:

let elementsToExpand = document.querySelectorAll (‘* [oculto]’);
for (let i = 0; i <elementsToExpand.length; i ++) {
let element = elementsToExpand [i];
element.hidden = false;
element.setAttribute (‘data-height’, element.offsetHeight.toString ());
element.hidden = true;
}
document.getElementById (‘click-on-me’). addEventListener (‘click’, function () {
for (let i = 0; i <elementsToExpand.length; i ++) {
let element = elementsToExpand [i];
element.hidden = false;
element.style.overflowY = ‘oculto’;
element.style.height = 0;
let animator = function () {
element.style.height = parseInt (element.style.height) + 1 + ‘px’;
if (parseInt (element.style.height)! == parseInt (element.getAttribute (‘data-height’))) {
setTimeout (animador, 5);
}
};
animador();
}
});

Y luego, también puedes usar jQuery:

• Cómo verificar si una cadena es un palíndromo en JavaScript
• Cómo hacer que esta página web se vea mejor
• ¿Cuánto tiempo te llevó aprender JavaScript?
• ¿Qué servicio utilizan las empresas tecnológicas para crear plantillas de correo electrónico?
• ¿Qué idioma necesitas para hacer un sitio web?

let hidden = $ (‘* [hidden]’). hide (0);
$ (‘# click-on-me’). click (function () {
hidden.slideDown ();
});

¡Buena suerte en tus esfuerzos de codificación!

Sí, yo mismo hice los fragmentos, pero cualquiera puede usarlos libremente.