CSS switch UI blocks visibility

Alternate visibility groups are surrounded by same container. By switching the ID of container, internal CSS will be adjusted showing only one block per container ID. This container ID has unique value for each child group.
Aqua
Fuchsia
Lime
Aqua First to choose
Fuchsia Second to choose
Lime Third to choose
(will be performed in window onload)
Preserving of state could be done either on server side by initially choosing last used container ID from persisted state(like cookies)
or on client side using cookies:
CssSwitch.html source
<!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">
<head>
    <title>CSS switch UI blocks visibility</title>
</head>
<body onload="RestoreSelection()">
    <h2>CSS switch UI blocks visibility</h2>
    Alternate visibility groups are surrounded by same container.
    By switching the ID of container, internal CSS will be adjusted showing only one block per container ID.
    This container ID has unique value for each child group.
    <br />
    <input type="radio" name="visibility" onclick="ChooseFirstId('Choise1_of_1_2_3','Choise2_of_1_2_3','Choise3_of_1_2_3')"/>Aqua   <br />
    <input type="radio" name="visibility" onclick="ChooseFirstId('Choise2_of_1_2_3','Choise1_of_1_2_3','Choise3_of_1_2_3')"/>Fuchsia    <br />
    <input type="radio" name="visibility" onclick="ChooseFirstId('Choise3_of_1_2_3','Choise1_of_1_2_3','Choise2_of_1_2_3')"/>Lime   <br />

    <style>
        #Choise1_of_1_2_3 #Group1{ display:block}
        #Choise1_of_1_2_3 #Group2{ display:none}
        #Choise1_of_1_2_3 #Group3{ display:none}

        #Choise2_of_1_2_3 #Group1{ display:none}
        #Choise2_of_1_2_3 #Group2{ display:block}
        #Choise2_of_1_2_3 #Group3{ display:none}

        #Choise3_of_1_2_3 #Group1{ display:none}
        #Choise3_of_1_2_3 #Group2{ display:none}
        #Choise3_of_1_2_3 #Group3{ display:block}

    </style>
    <div id="Choise1_of_1_2_3" >
        <div id="Group1" style="background-color:Aqua"      >Aqua       First   to choose</div>
        <div id="Group2" style="background-color:Fuchsia"   >Fuchsia    Second  to choose</div>
        <div id="Group3" style="background-color:Lime"      >Lime       Third   to choose</div>
    </div>

    <button onclick="RestoreSelection()">Restore Selection</button>(will be performed in window onload)<br />
    Preserving of state could be done either on server side by initially choosing last used container ID from persisted state(like cookies)<br/>
    or on client side using cookies:
    <script type="text/javascript" >
        function ChooseFirstId( idToSet, id_1, id_2)
        {
            for( var i = 0; i< arguments.length; i++ )
            {   var el = document.getElementById(arguments[i]);
                if( el )
                    el.setAttribute("id",idToSet);
            }
            // store last choise
            createCookie("LastSelection",idToSet);
        }
        function RestoreSelection()
        {
            var lastId = readCookie("LastSelection");
            if( !lastId )
                lastId = "Choise1_of_1_2_3";

            ChooseFirstId(lastId,'Choise1_of_1_2_3','Choise2_of_1_2_3','Choise3_of_1_2_3');
            var radios = document.getElementsByName("visibility");
            if( lastId == "Choise1_of_1_2_3" ) radios[0].checked = true;
            if( lastId == "Choise2_of_1_2_3" ) radios[1].checked = true;
            if( lastId == "Choise3_of_1_2_3" ) radios[2].checked = true;

        }

		// cookies by http://www.quirksmode.org/js/cookies.html
        function createCookie(name,value,days) {
            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 = name+"="+value+expires+"; path=/";
        }

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

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

    </script>
</body>
</html>
© Sasha Firsov, 2008