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 hacer un uso completo de las opciones de desarrollador en un teléfono inteligente
• Cómo crear un sitio web comercial de una agencia de viajes para un ITGS IA en IB usando HTML con JavaScript y CSS
• Cómo configurar imágenes en miniatura de arranque
• ¿Qué cosas necesito para convertirme en un desarrollador web de pila completa?
• ¿Qué es más fácil de optimizar regularmente para la interfaz de usuario front-end: Ruby on Rails vs Meteor?

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.