Traté de resolver este ejercicio pero parece que no elegí el método requerido.

 const btn = document.querySelector('#main-button') btn.addEventListener('click', () => { const images = document.querySelectorAll('.toggle .screenshot') images.forEach(i => i.classList.toggle('toggle-class')) images[0].classList.contains('toggle-class') ? btn.innerText = 'Show all screens' : btn.innerText = 'Hide all screens' }) function toggle(target, cclass) { document.getElementById(target).classList.toggle(cclass); }

Debo elegir un botón o hipervínculo. El script debe ubicarlos dinámicamente en la página, no puedo ubicarlos en el HTML.

Tengo que usar otra página de javascript que contenga las imágenes en una matriz

 var aSite = [ ["picsum.photos/200", "screenshot", "ToggleA"], ["picsum.photos/200", "screenshot", "ToggleB"], ]

y cancelarlos desde la página html.

 <article> <h2>Create a new site</h2> <button id="main-button">Hide all screens</button> <dl> <dt>Site – Manage Sites - New:</dt> <!-- <dd> the Site definition Wizard appears, you answer a number of questions<br><br> <button onclick="toggle('demoA', 'hideA')">Toggle A</button> <div class="toggle"> <img class="screenshot" width="238" height="222" src="https://picsum.photos/200" alt="screenshot" id="demoA" /> </div> </dd> <dt>“What would you like to call the website?”</dt> <dd> enter George's site<br><br> <button onclick="toggle('demoB', 'hideB')">Toggle A</button> <div class="toggle"> <img class="screenshot" width="310" height="307" src="https://picsum.photos/200" alt="screenshot" id="demoB"/> </div> </dd>--> </dl> </article>

La página css se ve así:

 .article { background-color: white; border: 1px groove silver; border-radius: 1em; margin-left: 230px; min-width: 700px; padding: 1em; width: auto; } img.screenshot { margin-bottom: 20px; margin-top: 20px; } div.toggle { margin: 10px 0 0 50px; } .toggle-class { display: none; } .hideA, .hideB { display: none }