Show and Hidden using JavaScript

Visualforce Page:

<apex:page id="page">
          
         <apex:includeScript value="{!$Resource.script1}" />
               
 <apex:form id="form">
  <div align="center">
   
        <apex:commandbutton value="pb1hide" onclick="return Hide1()" ondblclick="return Show1()" />
         <apex:commandbutton value="pb2hide" onclick="return Hide2()" ondblclick="return Show2()"/>
          
         </div>
           <apex:pageblock id="pb1">
           <apex:outputlabel >Student Name</apex:outputlabel>
        <apex:inputtext />
         <apex:outputlabel >Course</apex:outputlabel>
        <apex:inputtext />
        <div align='center'>
        <apex:commandbutton value="Save"/>
         <apex:commandbutton value="Cancel"/>
        </div>
       </apex:pageblock>
       <apex:pageblock id="pb2" >
         <apex:outputlabel >Address</apex:outputlabel>
        <apex:inputtextarea />
         <apex:outputlabel >phone number</apex:outputlabel>
        <apex:inputText />
          <div align='center'> 
        <apex:commandbutton value="Save"/>
         <apex:commandbutton value="Cancel"/>
        </div>
       </apex:pageblock>
 </apex:form>
</apex:page>

Script in Static Resources:

  function Hide1(){
     document.getElementById('page:form:pb1').style.display='none';
     return false;
                           }

  function Hide2(){

     document.getElementById('page:form:pb2').style.display='none';
      return false;
                          }
       

  function Show1(){                           

      document.getElementById('page:form:pb1').style.display='block';

      return false;
                            }

  function Show2(){                  

      document.getElementById('page:form:pb2').style.display='block';
       return false;
                            }