Saving state of collapsible panel using cookies

JavaScript
1

Hi,

I have this code for collapsing div below. What I want to achieve is that when I go back to the page, it would remember whether the div was collapsed(style.display = none) or expanded(style.display = block). Here is the collapse/expand script:


<script type="text/javascript">
function toggleDiv(div){
	  if(document.getElementById(div).style.display == 'none'){
		document.getElementById(div).style.display = 'block';
	  }else{
		document.getElementById(div).style.display = 'none';
	}
}
</script>

This is the html code calling the toggle function:


<h3 class="hndle" onmousedown="toggleDiv('div0')">
<span>Footer Options</span>
</h3>
<div id="div0">
EXPANDED
</div>

I was hoping to use JQuery cookies, but I’m still a beginner with this. Please help, thanks!

2

Hello,

I have this test code for saving state of collapsible panels using cookies:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
function toggleDiv(div,days){
 var obj=document.getElementById(div);
 obj.style.display=obj.style.display=='none'?'block':'none'
 document.cookie=div+'='+obj.style.display+';expires='+(new Date(new Date().getTime()+(days||-1)*86400000).toGMTString())+';path=/';
}

function cookie(nme){
  var re=new RegExp(nme+'[^;]+','i');
  if (document.cookie.match(re)){
   return document.cookie.match(re)[0].split("=")[1];
  }
  return null
 }

function checkcookie(nme){
 if (cookie(nme)){
  document.getElementById(nme).style.display=cookie(nme);
 }
}

document.body.onload = checkcookie('div0');

</script>
</head>

<body>
<h3 class="hndle" onmousedown="toggleDiv('div0',1)">
<span>Toggle 0</span>
</h3>
<div id="div0">
<p>Expanded!</p>
</div>
</body>

</html>

My issue here is that the code:

document.body.onload = checkcookie('div0');

does not work, but it works when I use this instead:

<body onload="checkcookie('div0');"

I will be transferring this script to a CMS addon, so I will not have direct access to the body tag. This means that

<body onload="checkcookie('div0');"

is not an option.

Please help!

3

Something else might be overwriting that onload event.

Do you have the ability to run a script from the end of the body?

Such as like this:


<html>
...
<body>
    ...
    <script src="script.js"></script>
</body>
</html>

or like this:


<html>
...
<body>
    ...
    <script type="text/javascript">
        // some script code here
    </script>
</body>
</html>

Because then, you can just this script code from the end of the body:


checkcookie('div0');
4

Wow, I didn’t think the answer could be so simple! Thanks so much, Paul!

P.S. I tried running a script at the beginning of the body similar to what you did, but nothing worked that time. What was the difference between running a script at the end and start of the body?

5

When a script runs, nothing below the script exists yet. If the script tries to work with elements that are expected to be on the page, it won’t find them.

Putting the script at the end of the body achieves performance benefits for loading your web page, and it also allows your script to work with page element that occur before it.

6

Ah, that makes sense. Thanks again Paul! :slight_smile: