I have found this site about how to make a Collapsible DIV using Javascript and I love it. I am using it on a Joomla powered site. However, I am having just one problem, and that is how to make it stay collapsed when changing pages. I have the div starting out as open, and then you can click to have it collapse, but the problem is that when you go to another page it starts open again.

I really need some help with this. Thank you.

here is the site with the details of it...

http://www.harrymaugans.com/2007/03/...cript-and-css/

Saving states is what widgetplus is about.
http://www.widgetplus.com

Thank you for introducing me to Widget+, but I really do not think that this applies here. Unless you can explain it to me better.

There are two ways you can save the state: using a session or a cookie. Cookies are probably easier to implement in this case.

I might be interested in using a cookie, but I have never done so before. Any helpful info you could send me to? I will look through Google as well. Thank you.

I wonder how YooTheme does it.

http://tools.yootheme.com/yootools/e...otoppanel.html

http://www.widgetplus.com/basic.htm

This shows a simple way to save state across pageloads.

Quirksmode has a good tutorial on cookies, as does W3Schools.

Thanks, I will look into it.

Does any one else have any other suggestions?

Ok, I am going the cookie route. It seems to be the most logical for such a small thing. Here is what I have...

poster being the DIV

function createCookie(poster,value,0) {
    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 = poster+"="+value+expires+"; path=/";
}

function readCookie(poster) {
    var posterEQ = poster + "=";
    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(posterEQ) == 0) return c.substring(posterEQ.length,c.length);
    }
    return null;
}

function eraseCookie(poster) {
    createCookie(poster,"",-1);
}

I have put the call for this cookie in the HTML page...

<script type="text/javascript" src="js/toppanel-cookie.js"></script>

However, Where do I go from here? Am I even doing this right?

Can anyone help me make a cookie for this?