Want to hide and show the output panel on button click

Question

I have 2 output panel. In the first I have a button when I click on the button the 1st outputpanel should get hide and 2nd one get display. I have my code I am rendering the output panel but it is not working. I am also calling method on my button click which is not required. Is there any way to avoid calling the method from the button for rendering the outputpanel. My VF page :

      <apex:outputPanel>
      <apex:selectList value="{!selectedBaseObject}" size="1">
          <apex:selectOptions value="{!basobjectDisplay}"></apex:selectOptions>
      </apex:selectList>
      <apex:commandButton reRender="relatedObjectForm" value="Next >> "/>
      </apex:outputPanel>

      <apex:outputPanel id="relatedObjectForm" rendered="{!if(selectedBaseObject != '--Select--' && selectedBaseObject != null, true, false)}">
          <apex:outputText value="shfef"></apex:outputText>
      </apex:outputPanel>

If any one have any better idea to do this task please guide me.

Update : Have change the button to html button and using javascript to hide

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript">
    $(function(){
        document.getElementById('relatedObjectForm').style.display = 'none';
    });
    function hidebaseObject(){
        document.getElementById('baseObjectForm').style.display = 'none';
        document.getElementById('relatedObjectForm').style.display = 'inline';
     }
    </script>

     <apex:form >
     <div id="baseObjectForm">
          <apex:selectList value="{!selectedBaseObject}" size="1">
              <apex:selectOptions value="{!basobjectDisplay}"></apex:selectOptions>
          </apex:selectList>
          <!--<apex:commandButton reRender="relatedObjectForm" value="Next >> "/>-->
          <input type="submit" value="Next >>" onclick="hidebaseObject();" />
      </div>

      <!--<apex:outputPanel id="relatedObjectForm" rendered="{!if(selectedBaseObject != '--Select--' && selectedBaseObject != null, true, false)}">
       --> 
       <div id="relatedObjectForm">
          <apex:outputText value="shfef"></apex:outputText>
       </div>
     <!-- </apex:outputPanel> -->

Please have a look on my updated code.

Answer 1

Use <input type="button"> instead of <input type="submit"> what you are using now. The submit reloads your page.

Answer 2

this is another way which i use for outpannel hide/show might be it useful for you.

VF Code :

  <apex:form>
      <div id="contentToToggle" style="display:{!if(showContent,"block","none")};">
           <apex:outputPanel id="pannel1" title="First Pannel" >
                     Hi welcome to first block
            </apex:outputPanel>
      </div>

     <div id="contentToToggle" style="display:{!if(showContent1,"block","none")};">
       <apex:outputPanel id="pannel2" title="second Pannel">
           Hi welcome to second block
       </apex:outputPanel>

     <apex:commandbutton value="Show" action="{!toggleContent}"  style="float:right;"/>
     </div>
  </apex:form>

Apex Code :

public YourClassConstructor()
   {
           showContent = true;
           showContent1 = false;
   }
 public PageReference toggleContent() {

        if(showContent){
            showContent = false;
             showContent1 = true;
             }
        else{
            showContent = true;
             showContent1 = false;
            }
        return null;
    }