I'm having a page Say VFPage1 with class apex1

In my page2, my code is something like this

var arr = document.getElementById("contactandaccount"); alert(arr); //getting null here
<apex:define name="sidebar">
       <div id="sidebar">
           <ul style="display: block;" class="leftnav nav ">
            <li class="submenu1 active"><a href="#account" data-toggle="tab"><i class="icon icon-home"></i> <span> Accounts</span></a></li>
              <li><a href="#contactandaccount" data-toggle="tab"><i class="icon icon-tasks"></i> <span>Contacts and Accounts</span> </a></li></ul>
              <div id="account" class="tab-pane">
                    <apex:include pageName="formtemplate" style="display-none;"/>
            <div id="contactandaccount">
                 <apex:include pageName="Includetemplate" style="display-none;"/>

enter image description here

When I click on API Accounts VFPage1 should be displayed.Similarly for the other tabs also.I want a individual Vf Page and class should get displayed for each object(i.e., for api accounts,Contacts,Opportunities etc) But here nothing get displayed What was the mistake I'm doing here

  • 2
    The apex:include is enclosed with your <a> </a> HTML anchor tabs. This is not what you want. Are you wanting to navigate to page VFPage1 when they click on the link? <apex:include> is not the way to achieve this.
    – Doug B
    May 16, 2013 at 14:56
  • @DougB then What would be the solution for this? Added an Image in my Question.So please suggest a solution based on my requirement
    – Eagerin Sf
    May 20, 2013 at 6:53
  • It sounds like you want tabs, and when you click on a particular tab then you get information which is already defined on a VF page. In that case you may want to consider using an <apex:tabPanel> and then within that you would have an <apex:tab> which used <apex:include> to bring in the content you wanted.
    – Doug B
    May 20, 2013 at 8:31
  • Here we are not going to use Tab System(That is previously used).Client requirement is as shown in the Image.So I guess by using html I need to use Includepage and make it work
    – Eagerin Sf
    May 20, 2013 at 8:38
  • 1
    Something like this, setup divs for each page, the hidden section would look something like this <div id='APIAccountsTab' style='display:none;'><apex:include pageName="VFPage1" /></div> Then you would show it by changing the style of the div to display:block using javascript in response to the user clicking on the tab heading.
    – Doug B
    May 20, 2013 at 10:49

2 Answers 2


You need to use {!} within your rendered attribute. So:

<apex:include pageName="VFPage1" rendered="{!apiaccount}"/>


<apex:include pageName="VFPage1" rendered="{!apiaccount == true}"/>

Also, I'm not sure what you're trying to accomplish in this list. If you want to make a clickable item in a list using Visualforce, try something like this instead:

<apex:outputText value="API Accounts">
    <apex:actionSupport event="onclick" action="{!clickMethod}" rerender="outerBlock"/>

where clickMethod is an Apex method that does something like toggle the value of apiaccount, and outerBlock is the block of Visualforce that is surrounding the area that you want optionally rendered. Or you can omit this part and the entire page will get refreshed:

<apex:outputText value="API Accounts">
    <apex:actionSupport event="onclick" action="{!clickMethod}"/>
  • ....also the include is inside the <a> </a> tags so if it does render it will try and show the entire second page as a single hyperlink!
    – Doug B
    May 16, 2013 at 14:57
  • True! I didn't notice that.
    – Adam
    May 16, 2013 at 15:02

it may be you have set apiaccount in controller to false

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .