javascript - Click on a group of thumbnails, the large image will be displayed and switch to the corresponding image, and then click on the thumbnail to hide the large image. If you encounter any problems, please ask the teachers for advice.

Question

Click on a group of thumbnails to display the large image and switch to the corresponding image, then click on the thumbnail to hide the large image. When the large image is displayed, click on other small images to switch the large image but not hide it. My question is: when the big picture is displayed, click on other small pictures, the big picture will be switched but not hidden, but the second click on the thumbnail will hide the big picture. How to achieve this effect?
<ul class="tm-m-photos-thumb">
<li src="img/images/production-introdution-review-bgpic1.jpg">
<img src="img/images/production-introdution-review-smpic1.jpg">
</li>
<li src="img/images/production-introdution-review-bgpic2.jpg" >
<img src="img/images/production-introdution-review-smpic1.jpg">
</li>
<li src="img/images/production- introdution-review-bgpic3.jpg">
<img src="img/images/production-introdution-review-smpic1.jpg">
</li>
<p class ="tm-m-photo-viewer" style="width: 402px; height: 302px; display: none;">
<img src="img/images/production-introdution-review-bgpic1.jpg " style="width: 402px; height: 302px;">
</p>

Answer 1

Wouldn’t it be great if you could give me data-status? Judge when you click!