I have create following two visualforce page and I would like to show in single VF page based on the option button. how to do?

VF Page: firstvf secondvf

thirdvf Code:


<apex:outputpanel render="true">

<apex:outputpanel render="false">


You can use the apex:include tag. Please refer to the Salesforce Docs for further details. If you want to dynamically display the pages based on the option selected, here is a simple solution for that:

<input type="checkbox" id="option1" onclick="displayPage();">option1</input> <input type="checkbox" id="option2" onclick="displayPage();"> option2 </input>
<div id="option1Page" style="display:none;">
<apex:include pageName="vfpage1"/>

<div id="option2Page" style="display:none;">
 <apex:include pageName="vfpage2"/>
<script type="text/javascript">

    function displayPage() {
    if (document.getElementById('option1').checked ) {
     document.getElementById('option1Page').style.display = "block";
      document.getElementById('option1Page').style.display = "none";
    if (document.getElementById('option2').checked ) 
     document.getElementById('option2Page').style.display = "block";
    document.getElementById('option2Page').style.display = "none";

  • Can you make the code please am really beginner. – Alex Apr 15 '15 at 18:04
  • check the updated answer. really recommend to have a look at the at the links as well. – Rajiv Bhatt Apr 15 '15 at 18:09
  • Really thanks how to create the optionbutton on the top and render based on the optionbox? – Alex Apr 15 '15 at 18:11
  • what kind of option button, can you pleas elaborate your use case? – Rajiv Bhatt Apr 15 '15 at 18:14
  • the page should show the two option like show-firstpage and show-secondpage. if we click the firstoption, the first page should show. – Alex Apr 15 '15 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.