► ๖ۣۜLINH ๖ۣۜOLIVER ◄

Javascript

<script language=javascript type='text/javascript'> 
readCookie = function (name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
 }
 return "es";
 }

function hideDiv() {
 if (document.getElementById) { // DOM3 = IE5, NS6
 document.getElementById('sidebar').style.visibility = 'hidden'; 
 document.getElementById('sidebar').style.height = '0';
 document.getElementById('content').style.width = '100%';
 }
 else {
 if (document.layers) { // Netscape 4
 document.hideShow.visibility = 'hidden';
 }
 else { // IE 4
 document.all.hideShow.style.visibility = 'hidden';
 }
 }
 document.cookie = 'show=false';
}

function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('sidebar').style.visibility = 'visible';
document.getElementById('content').style.width = '660px';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
document.cookie = 'show=true';
}

if(readCookie('show') == "true"){
 showDiv();
}
else {
 hideDiv();
}
</script>

HTML

<style>
a#round{
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#ff0000;
border:3px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:1em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
a#round:hover{
background:#c20b0b;
border:5px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}
</style>
<div id="hideShow" style="height:auto;color:#FFF;padding:11px 2px;text-align:center;bottom:0;position:fixed;float:right;"><a id="round" href="javascript:hideDiv()">Hide Widget</a> - <a id="round" href="javascript:showDiv()">Show Widget</a></div>