Show and Hiding the particular Components in Visualforce Page using Script

Visualforce Page:

<apex:page id="page">
<script>
    function hidepb(){
        document.getElementById('page:form:pb1').style.display = 'none';
        return false;
                             } 
    function showpb(){
        document.getElementById('page:form:pb1').style.display = 'block';
        return false;
                               }
</script>
<!-- <apex:includescript value="{!$Resource.show&hide}"/> -->
  <apex:form id="form">
      <apex:pageBlock id="pb1" >
          <apex:outputLabel >Ctrl a</apex:outputLabel>
      </apex:pageBlock>
   
      <apex:pageBlock id="pb2" >
          <apex:outputLabel > Technologies</apex:outputLabel>
          <apex:commandButton value="Hide" onclick="return hidepb()"/>
          <apex:commandButton value="Show" onclick="return showpb()"/>
      </apeX:pageBlock>
  </apex:form>
</apex:page>

show&hide: It is a script file in Static Resources

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