Div mouse click to display not working

Div mouse click to display not working

I want to hide div until user clicks it then it should be displayed.
HTML
<div class="cTsdiv"><a href="/{{ i.couponStoreURL }}/#{{ i.id }}">
<span id="couponCode" style="">{{ i.couponCode }}</span></a>
<span class="cTs">Click to see the code</span></div><br><br>
CSS
.cTsdiv {
height:50px;
width: 175px;
position: relative;
display:inline-block;
border:1px dashed;
padding:5px;
margin:5px;
background:#EE4000;
color:white;
height:20px;
text-align:center;
}
.cTs {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
height:30px;
width: 185px;
line-height:4em;
background: black;
visibility: visible;
position: absolute;
-webkit-transition: visibility opacity 0.1s;
}
.cTsdiv:hover .cTs {
opacity:1;
color:white;
visibility: hidden;
}
.cTsdiv a {
font-color:white;
text-decoration:none;
}