[SalesForce] Want to hide and show the output panel on button click

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.

Best Answer

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

Related Topic