Need help expanding script (Cookies / divs)

Fizziwig · 05-07-2009, 09:31 PM

Alright. I expanded upon a script a friend helped me write, to create a simple check box that hides / shows content, as shown HERE.

Unfortunately, I don't have a clue how to expand this, so that I can use more than one checkbox on the page, to open different sections.

Any help would be greatly appreciated, source code is available below:

Code:

<html>
<head>
<title>Title of page</title>
<script language="JavaScript">
function getCookie(NameOfCookie)
{ if (document.cookie.length > 0) 
{ begin = document.cookie.indexOf(NameOfCookie+"="); 
if (begin != -1) 
{ begin += NameOfCookie.length+1; 
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end)); } 
}
return null; 
}

function setCookie(NameOfCookie, value, expiredays) 
{ var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value) + 
((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}

function delCookie (NameOfCookie) 
{ if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}

}

function showhidefield() {
if (document.frm.chkbox.checked)
{
document.getElementById("hideablearea").style.display = "block";
setCookie("fieldshown","true",31);
}
else
{
document.getElementById("hideablearea").style.display = "none";
setCookie("fieldshown","false",31);
}
}

window.onload = function () {
var c = getCookie("fieldshown");
if (c) {
document.frm.chkbox.checked = (c == "true");
}
showhidefield();
}
</script>
</head>
<body>

<form name='frm' action=''>
<input type="checkbox" name="chkbox" onClick="showhidefield()" checked="checked">
<div id='hideablearea' style='display:none'>
Hidden / displayed text...
</div>
</form>
</body>
</html>

Thanks a lot.

Old Pedant · 05-07-2009, 10:39 PM

Like this?

Code:

<html>
<head>
<title>Title of page</title>
<script language="JavaScript">
function getCookie(NameOfCookie)
{ 
    if (document.cookie.length > 0) 
    { 
        var begin = document.cookie.indexOf(NameOfCookie+"="); 
        if (begin != -1) 
        { 
            begin += NameOfCookie.length+1; 
            var end = document.cookie.indexOf(";", begin);
            if (end == -1) end = document.cookie.length;
            return unescape(document.cookie.substring(begin, end)); 
        } 
    }
    return null; 
}

function setCookie(NameOfCookie, value, expiredays) 
{ 
    var ExpireDate = new Date ();
    ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
    document.cookie = NameOfCookie + "=" + escape(value) 
                    + ( (expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}

function showhide(which) 
{
    var name = which.name.substring(3); // lop off the CB_
    var div = document.getElementById("DIV_"+name);
    div.style.display = ( which.checked ? "block" : "none" );
    setCookie( name, ""+which.checked, 31 );
}

function forminit( )
{
    for ( var e = 0; e < document.frm.elements.length; ++e )
    {
        var elem = document.frm.elements[e];
        if ( elem.name.substring(0,3) == "CB_" )
        { 
            if ( getCookie(elem.name.substring(3)) == "true" )
            {
                elem.click();
            }
        }
    }
}
</script>
<style>
.hide { display: none;
        height: 200px; width: 200px; 
        border: solid red 2px;
        background-color: pink;
      }
</style>
</head>

<body onload="forminit();">
<form name="frm">
<input type="checkbox" name="CB_frammish" onClick="showhide(this)"> frammish
<input type="checkbox" name="CB_zamboni"  onClick="showhide(this)"> zamboni
<div id="DIV_frammish" class="hide">
    Hidden / display of frammish...
</div>
<div id="DIV_zamboni" class="hide" style="background-color: lightgrey;">
    Hidden / display of zamboni...
</div>
</form>
</body>
</html>

If it's not obvious, notice the names of the checkboxes (must start with CB_ as code is written) and the IDs of the divs (must start with DIV_ and match a checkbox name). Obviously, you can change the prefixes as you like if you change the code appropriately.

Fizziwig · 05-08-2009, 05:26 PM

Thank you so much