remember div display status in cookie

clausowitz · October 22, 2011

Hi All,

I have some javascript on my page that toggles the visibility of my divs.

I want to save the status of a div in a cookie for later.

The code to change the visibility is working but I cannot save it to the cookie and read

the status of all divs on loading of the page.

<script language="javascript" type="text/javascript"> 
name='open';
function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
			createCookie(name,'false',0);
			imageEle.innerHTML = '<img src="images/o.gif" title="Show this window" align="right">';
        }
        else {
                ele.style.display = "block";
                createCookie(name,'true',0);
			imageEle.innerHTML = '<img src="images/x.gif" title="Hide this window" align="right">';
        }
}
function readCookie(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 null;
}
function createCookie(name,value,days) {
if (days) {
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function checkCookie(name) {
    var x = readCookie(name)
    if (x == 'false') {
    	document.getElementById('showHideDiv').style.display = 'none'
    } else if (x == 'true') {
        document.getElementById('showHideDiv').style.display = 'block'
    }
}
</script>
<body onload="javascript:checkCookie('open')">

sunfighter · October 24, 2011

I made a few changes, but this works great. I added a body to show the display and I did change that, because I don't have your image. and added to the checkCookie(name) function.

<script type="text/javascript">
name='open';
function toggle(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
			createCookie(name,'false',0);
			imageEle.innerHTML = 'Show this window';
        }
        else {
                ele.style.display = "block";
                createCookie(name,'true',0);
			imageEle.innerHTML = 'Hide this window';
        }
}
function readCookie(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 null;
}
function createCookie(name,value,days) {
if (days) {
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function checkCookie(name) {
    var x = readCookie(name)
    if (x == 'false') {
    	document.getElementById('showHideDiv').style.display = 'none'
	document.getElementById('switchImgTag').innerHTML = 'Show this window';
    } else if (x == 'true') {
        document.getElementById('showHideDiv').style.display = 'block';
	document.getElementById('switchImgTag').innerHTML = 'Hide this window';
    }
}
</script>
<style type="text/css">
body
{
width: 300px;
}
</style>
<body onload="javascript:checkCookie('open')">
<div id="showHideDiv" style="display:block;">Some bs to hide or not</div>
<div id="switchImgTag" style="float:right;border:black solid 1px;">Hide this window</div><br><br>
<button type="button" style="float:right;" onclick="toggle('showHideDiv', 'switchImgTag');">click here</button>
</body>

clausowitz · October 24, 2011

thanks for this sunfighter. Only the problem that I had was that I have about 20 of those divs.

I came up with this solution. Let me know what you think.

<?php 
if (isset($_COOKIE['contentDivImg9'])) {
$showhide9 = $_COOKIE['contentDivImg9']; }
	else { $showhide9 = "block"; }
	if ( $showhide9 == "block") { $button9 = 'x'; } else { $button9 = 'o';}
?>

Just have to find something for the alt text: Show this window or Hide this window.

Sign In

remember div display status in cookie

Recommended Posts

clausowitz

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

clausowitz

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information