サムネイルのグループをクリックして大きな画像を表示し、対応する画像に切り替えてから、サムネイルをクリックして大きな画像を非表示にします。大きな画像が表示されているときに、他の小さな画像をクリックすると大きな画像が切り替わりますが、非表示にすることはできません。私の質問は、大きな画像が表示されているときに、他の小さな画像をクリックすると、大きな画像が切り替わりますが非表示にはなりませんが、サムネイルをもう一度クリックすると大きな画像が非表示になります。この効果を実現するにはどうすればよいですか?
<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 クラス="tm-m-photo-viewer" style="幅: 402px; 高さ: 302px; 表示: なし;">
<img src="img/images/production-introdution-review-bgpic1.jpg " style="幅: 402px; 高さ: 302px;">
</p>