Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Dileep KumarDileep Kumar 

How i will create multiple tab on Visualforce Page?

Hi All

I created a visualforce page in my page there are many div i want to create tabs for each div on this page.

How i will do?

Please help me

Thanks in advance

Best Answer chosen by Dileep Kumar
NagendraNagendra (Salesforce Developers) 
Hi Dileep, 

As i understand that you want to create multiple tabs on a visual force page please find the below code sample.
  
<div id="tabs-{!obj.id}" >                        
            <apex:tabPanel switchType="client" selectedTab="sch" id="dataTabPanel" >
                <apex:tab label="Tab1" name="Scheduled Visit Mapping" id="sch"> 
                    <apex:outputPanel id="op1">
                        <apex:outputLabel styleClass="c1">Name : </apex:outputLabel>{!obj.name}
                        <apex:outputLabel styleClass="c1">ID : </apex:outputLabel>{!obj.id}
                         .           
                         .
                <apex:tab label="Tab2" name="Scheduled Visit Mapping" id="sch"> 
                    .
                    .
                    .
            </apex:tabPanel>
        </div>
For more information on this please refer to the below link

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_tabPanel.htm

Kindly mark my solution as the best answer if this helps you..............

Best Regards,
Nagendra.P

All Answers

Prashanth SamudralaPrashanth Samudrala
Try this as an example 
<!-- For this example to render properly, you must associate the Visualforce page 
with a valid account record in the URL. 
For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
                    
<!-- This example shows how to use the tabClass and inactiveTabClass attributes to
change the default styling of the tab bar. Note that in the style definitions,
'background-image:none' is required to override the default image with the
specified color. You can also provide your own image with .css styles. -->
            
<apex:page standardController="Account" showHeader="true">
    <!-- Define Tab panel .css styles -->
    <style>
    .activeTab {background-color: #236FBD; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>
            
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
    </apex:tabPanel>
</apex:page>

Cheers,
Prashanth
www.autorabit.com 



 
NagendraNagendra (Salesforce Developers) 
Hi Dileep, 

As i understand that you want to create multiple tabs on a visual force page please find the below code sample.
  
<div id="tabs-{!obj.id}" >                        
            <apex:tabPanel switchType="client" selectedTab="sch" id="dataTabPanel" >
                <apex:tab label="Tab1" name="Scheduled Visit Mapping" id="sch"> 
                    <apex:outputPanel id="op1">
                        <apex:outputLabel styleClass="c1">Name : </apex:outputLabel>{!obj.name}
                        <apex:outputLabel styleClass="c1">ID : </apex:outputLabel>{!obj.id}
                         .           
                         .
                <apex:tab label="Tab2" name="Scheduled Visit Mapping" id="sch"> 
                    .
                    .
                    .
            </apex:tabPanel>
        </div>
For more information on this please refer to the below link

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_tabPanel.htm

Kindly mark my solution as the best answer if this helps you..............

Best Regards,
Nagendra.P
This was selected as the best answer