/    Sign up×
Community /Pin to ProfileBookmark

Saving state of collapsible panel using cookies

Copy linkTweet thisAlerts:
Jun 24.2011

I’m creating a script that saves my collapsed/expanded panel’s state. This is my code for the collapsible panels.

[CODE]<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>[/CODE]

Here is the html code that calls the script:

[CODE]<h3 class=”hndle” onmousedown=”toggleDiv(‘div0’)”>
<span>Toggle</span>
</h3>
<div id=”div0″”>
<p>Expanded</p>
</div>
[/CODE]

I’d like to use JQuery cookies for this, but I’m a total beginner with it. Please help!

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsJun 24.2011 — [CODE]<!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);
}
}

</script>

</head>

<body onload="checkcookie('div0');">
<h3 class="hndle" onmousedown="toggleDiv('div0',1)">
<span>Toggle</span>
</h3>
<div id="div0">
<p>Expanded</p>
</div>
</form>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@ben_errolauthorJun 24.2011 — Hi Vic,

Thanks for the reply. I tried the code you posted but I used

[CODE]window.onload = checkcookie('div0');[/CODE]

inside the javascript instead of

[CODE]<body onload="checkcookie('div0');">[/CODE]

Does that make a difference? I'm programming this in Wordpress so I have no access to the body tag. If not, any other reason why I can't get it to work?

Thank you for taking the time to code this.
Copy linkTweet thisAlerts:
@cluefulJun 24.2011 — [CODE]
function cookie(nme){
var re=new RegExp(nme+'[^;]+','i');[/CODE][/QUOTE]

There is a potential weakness there:

[CODE]var re = new RegExp( '(^|\s)' + nme+'[^;]+', 'i' );[/CODE]
×

Success!

Help @ben_errol spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...