クリックで画像を表示したい

クリックで画像を表示したいのですが、クリックした後の文字の消し方がわかりません。
下記の記述を使えるようにしたいです。歪な書き方で申し訳ないのですがお願いします。

<div class="sample01" onclick="this.getElementsByTagName('img')[0].style.visibility='visible';">
<p>text</p>
<img src="" alt="[画像]">
</div>


.sample01{
background:#111;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 300px;
}
.sample01 img{
visibility: hidden;
width: 100%;
height: 100%;
}
.sample01 p{
color:#fff;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
visibility:visible;}

No.1 ベストアンサー 回答者： racs 回答日時： 2019/03/11 23:10

<div class="sample01" onclick="this.getElementsByTagName('img')[0].style.visibility='visible';">

　↓

<div class="sample01" onclick="this.getElementsByTagName('img')[0].style.visibility='visible'; this.getElementsByTagName('p')[0].style.visibility='hidden';">

この回答へのお礼

できました！ ありがとうございます！

お礼日時：2019/03/12 09:47