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>