I tried to solve this exercise but it seems that I did not choose the required method.

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);
}

I must choose a button or hyperlink. The script must dynamically place them in the page, I may not put them in the HTML.

I have to use another javascript page that contains the images in an array

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

and cancel them from html page.

<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>

The css page looks like this:

.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
}