Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need help expanding script (Cookies / divs)

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •