Disclaimers

--------------------- VERSION 1 (open/close) ---------------------


<a href="javascript:;" onmousedown="if(document.getElementById('disclaimer').style.display == 'none') { document.getElementById('disclaimer').style.display = 'block'; } else { document.getElementById('disclaimer').style.display = 'none'; }">disclaimer</a>
<div id="disclaimer" style="display:none">disclaimer text goes here</div>


<style> #disclaimer{width:250px; text-align:left; padding:20px; background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.5); border-radius:10px; font-size:10px; transition:all 1s} </style>

--------------------- VERSION 2 (on hover) ---------------------


<a class="info" href="#">disclaimer<span> disclaimer text goes here </span></a>


<style> a.info { position:relative; z-index:24; text-decoration:none } a.info:hover { z-index:25; } a.info span { display: none; } a.info:hover span { display:block; position:absolute; top:2em; left:-2em; width:250px; background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.5); border-radius:10px; font-size:10px; padding:20px} </style>


--------------------- VERSION 3 (opacity) ---------------------


<a href="javascript:;" onmousedown="if(document.getElementById('disclaimer2').style.opacity == '0') { document.getElementById('disclaimer2'). style.opacity = '1'; } else { document.getElementById('disclaimer2'). style.opacity = '0'; }">disclaimer</a>
<div id="disclaimer2" style="opacity:0">disclaimer text goes here</div>


<style> #disclaimer2{width:250px; text-align:left; padding:20px; background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.5); border-radius:10px; font-size:10px; transition:all 1s} </style>


--------------------- VERSION 4 (height) ---------------------
--- IMPORTANT: "style.height = '60px';" must be the same height as #disclaimer3 height for accurate transitions! ---


<a href="javascript:;" onmousedown="if(document.getElementById('discwrapper'). style.height == '0px') { document.getElementById('discwrapper'). style.height = '60px'; } else { document.getElementById('discwrapper'). style.height = '0px'; }">disclaimer</a>
<div id="discwrapper" style="height:0px;overflow:hidden;"><div id="disclaimer3" style="display:block">disclaimer text goes here</div></div>

<style> #disclaimer3{width:250px; text-align:left; padding:20px; background: rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.5); border-radius:10px; font-size:10px; transition:all 1s}  #discwrapper{transition:height 2s}</style>