HOW TO Hide/Display content in DIV tags in a Content Editor Web Part

<div id="div1">

    <label id="label1"><h2>United States</h2></label><br />

    <label id="label2">United States info on this page</label><br>

    <input id="button1" type="button" value="Go to Page 2" onclick="javascript:GoToPage2()" />

</div>

 

<div id="div2">

    <label id="label3"><h2>Canada</h2></label><br />

    <label id="label4">Canada Info on this page</label><br>

    <input id="button2" type="button" value="Go to Page 1" onclick="javascript:GoToPage1()" />

</div>

 

<script type="text/javascript">

 

_spBodyOnLoadFunctionNames.push("GoToPage1");

 

    function GoToPage2()

    {

        //alert("In Page 2 code");

       

        var divTag1 = document.getElementById("div1");

        divTag1.style.display = "none";

 

        var divTag2 = document.getElementById("div2");

        divTag2.style.display = "";

    }

 

    function GoToPage1()

    {

 

        //alert("In Page 1 code");

 

        var divTag2 = document.getElementById("div2");

        divTag2.style.display = "none";

 

        var divTag1 = document.getElementById("div1");

        divTag1.style.display = "";

 

       

 

       

 

       

       

    }

 

    </script>