Details and Summary

The simplest example of details-summary is as was shown in the demonstation (Demo page) with only a bit of text for the summary and more text for details. The HTML code for producing that is merely:
<details>
<summary>Some topic of interest</summary>
<p class= "p1">Discussion of that interesting topic</p>
</details>
NOTE: .p1 has been styled to make this text red and to indent the text a few spaces.

Some topic of interest

Discussion of that interesting topic

Having an image in the details area is not much more complicated. The code follows:
&tldetails>
<summary>Where We Spend the Day</summary>
<p><img src= "schoolhouse.jpg"> In school, of course!</p>
</details>

Where We Spend the Day

In school, of course!

Although it is unlikely that we often want an image as the summary, we might wish to do so occasionally. Any or all of the images could even have a link, and I have put a link on the first image in the details section just to show that it works. Here are some outstanding scientists I have known, but, first, the code to produce them is:
<details style= "width: 120%;">
<summary><img src= "Lightning.jpg" width= "250px;"> <b>Great Dogs of Science</b></summary>
<p><a href= "https://www.johnandval.org/stories/Humor/dogScientist.html" title= "Link to dog scientist images that will show one after another"><img src= "Canidologist.jpg" width= "300px;"></a> <img src= "Ornithologist.jpg" width= "300px;"> <img src= "ResearchScientists.jpg" width= "300px;"> </details>

Great Dogs of Science