How to display several hidden divs inside one div on click on this div, without assigning separate id's?

Question

JavaScript

Good afternoon.
Let's say there are a number of images on the page. They can be either table cells or just scattered around the page - I don't know if that changes anything.
Each image has a description + more images of the same subject, but from a different angle.
For example, images of animals: lion, elephant, wolf, tiger. In addition to pictures, the user does not see anything.
But by clicking on the picture, this picture should increase in the center of the screen and it should have a description + arrows to see other photos of the same animal.
Those. it should not be a separate page, but everything should be executed right there.
As a noob, I would do it like this: I would assign an id to each image, I would assign an id to a div with a description and hide it. And I would do this for every animal.
Well, then on click: document.getelementbyid("tiger_div").style.display = "block". Etc.
But maybe somehow you can write one function that would be performed for all similar elements?
The heart prompts that it is necessary to look towards "this", but the brain does not enter the functional yet.

Answer 1

It is possible to hang on img such attribute data-animal="leo". When you click on it, take what is in data-animal, when the image is enlarged by clicking on it or the arrows send ajax server and take the next image from leo from it, replacing the current open one with it.