I need a way to make a div element hidden until the user clicks on it, at which point it should be displayed.
HTML
<div class="coupon-wrapper">
<a href="/{{ i.couponStoreURL }}/#{{ i.id }}">
<span id="couponCode" style="">{{ i.couponCode }}</span>
</a>
<span class="click-to-see">Click to reveal code</span>
</div><br><br>
CSS
.coupon-wrapper {
height:50px;
width: 175px;
position: relative;
display:inline-block;
border:1px dashed;
padding:5px;
margin:5px;
background:#EE4000;
color:white;
text-align:center;
}
.click-to-see {
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;
}
.coupon-wrapper:hover .click-to-see {
opacity:1;
color:white;
visibility: hidden;
}
.coupon-wrapper a {
color:white;
text-decoration:none;
}