[문의] 이미지 클릭했을시 숨겨놓은 이미지를 나오게 할려면

이미지를 클릭시 접어놓은 이미지들을 나오게 하고 싶은데 

예시에 있는 코드들은 글씨를 눌러서 하는거라서 적용을 못 시키겠어요....

<!--이 뒤로 1번탭 버튼--><div data-inven-tab-for="0" data-inven-selected-css="{'_SELF_':{'paddingLeft':'30px'},'tab_0_si':{'display':'none'},'tab_0_usi':{'display':'block'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'30px'},'tab_0_si':{'display':'block'},'tab_0_usi':{'display':'none'}}" margin:="" 6px="" 0;="" padding:="" 4px="" 2px;="" border-radius:="" 0="" background-color:#000000;="" color:="" white;="" cursor:="" pointer;"=""><a heref="#" data-inven-tooltip="#38761d;#000000;#FFFFFF;인장이미지1"><img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i15498677714.png" width="100" height="100" data-inven-id="tab_0_si"><!--닫힌 이미지--><img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i15498677714.png" width="100" height="100" style="display:hidden;" data-inven-id="tab_0_usi"><!-- 열린 이미지--></a></div><!-- 2번탭 버튼 --><div data-inven-tab-for="1" data-inven-selected-css="{'_SELF_':{'paddingLeft':'30px'},'tab_1_si':{'display':'none'},'tab_1_usi':{'display':'block'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'30px'},'tab_1_si':{'display':'block'},'tab_1_usi':{'display':'none'}}" margin:="" 6px="" 0;="" padding:="" 4px="" 2px;="" border-radius:="" 0="" background-color:#000000;="" color:="" white;="" cursor:="" pointer;"=""><a data-inven-tooltip="#38761d;#000000;#FFFFFF;인장이미지3"><img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i16340884083.jpg" width="50" height="100" data-inven-id="tab_1_si"> <!-- 닫힌 이미지--><img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i16340884083.jpg" width="50" height="100" style="display:hidden;" data-inven-id="tab_1_usi"><!-- 선택했을 때 이미지--></a></div><!--여기까지 2번탭 버튼--><!-- 3번탭 버튼 --><div data-inven-tab-for="2" data-inven-selected-css="{'_SELF_':{'paddingLeft':'30px'},'tab_2_si':{'display':'none'},'tab_2_usi':{'display':'block'}}" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'30px'},'tab_2_si':{'display':'block'},'tab_2_usi':{'display':'none'}}" margin:="" 6px="" 0;="" padding:="" 4px="" 2px;="" border-radius:="" 0="" background-color:#000000;="" color:="" white;="" cursor:="" pointer;"=""><a data-inven-tooltip="#38761d;#000000;#FFFFFF;인장이미지3"><img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i15468551783.png" width="100" height="100" data-inven-id="tab_2_si"> <!-- 기본 이미지 : 선택되지 않았을 때 보이는 이미지--><img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i15468551783.png" width="100" height="100" style="display:hidden;" data-inven-id="tab_2_usi"></a></div>

여기까지는 만들었는데 예제코드인 

<a data-inven-toggle="seal-image">

<img src="https://static.inven.co.kr/column/2016/03/07/news/i11200771177.png">

</a>

<div data-inven-id="seal-image" style="display:none;"><br>

이미지를 클릭하여도 인장이 접힙니다.<br><br>

<a data-inven-toggle="seal-image"> 
<img src="https://static.inven.co.kr/column/2016/03/07/news/i11415766577.jpg">
<img src="https://static.inven.co.kr/column/2016/03/07/news/i11466866990.jpg">
</a><br><br>

인장의 이미지는 무료 공개 이미지를 사용하였습니다.<br>
<a href="https://www.pexels.com/">https://www.pexels.com/</a> 의
<b> Creative Commons Zero (CC0) license</b>를 따릅니다. 

</div>

<a href="#" data-inven-hide="seal"> 인장 숨기기</a>

<div data-inven-id="seal">
    인장 이미지 1, 이미지 2, 이미지 3
</div>


원문보기: 
http://www.inven.co.kr/board/powerbbs.php?come_idx=4712&l=2#103#csidxd6a84a82bd691d8862b39abdac93e76 

이거로는 적용이 안되더라고요....

저 이미지 위에 마우스를 갖다 됫을떄 문구가 뜨는데 

그 이미지를 누르면 숨겨놓은 이미지가 나오게 할려면 어떻게 할까요 

탭 으로 하는 것도 적용 할려고 했는데 제 실력으로는 무리이더라고요.....