Easy Jquery Tabs for Visualforce Pages

[Live Demo]

This is another blog regarding so called Easy Jquery Component.Now this component helps you to generate  the Jquery Tabs very easily in a Visualforce pages. Follows the same syntax as the standard component, with added Jquery goodness. Pretty straight forward and can include standard components inside the Jquery tabs.

How it looks like ?

How to use the components?

  • <c:Tabpanel> : A wrapper component that holds all the tab together inside a panel.
  • <c:Tab> : Represents a single Tab inside a tabpanel.
Below is a sample code to generate a Jquery Tab

<!--Tab Panel -->  
   <c:Tabpanel >  
     <!--First Tab-->  
     <c:Tab title="Tab 1">  
       This is a tab 1. You can add standard component inside also.  
       <apex:pageBlock title="Standard page block">  
         This is a pageblock component.  
         <apex:pageBlockSection title="This is a section" collapsible="false">  
     <!--Second Tab -->  
     <c:Tab title="Tab 2">  
       This is a tab 2  



  1. Excellent Post. Also visit http://msnetframework.com/#framework.php

  2. Hi,

    Can you send me the JQ file.


    1. Well its included in the package. And the static resource name is "jQuery_UI_1_10_2"

  3. Totally cool stuff .

  4. Hi,
    Can you please tell me how to update the orange color to blue color

    1. set importCSS = "false" in Tabpanel
      and use http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css or http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.min.css stylesheet in your page using apex:includeStylesheet

    2. Thanks Avinava.I have updated tab panel component with apex:attribute name="importCSS" description="By default the value is set to true,set the value to false if you dont want to laod the default jQuery CSS" default="false" type="Boolean" and included the style sheet in my visualforce page as apex:stylesheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.min.css" .But still it is not working

    3. Ok I will releasing a update soon that will let you change the theme easily using an attribute

    4. New version is uploaded in the project detail page. There is a new attribute called theme you can set the value to any jquery theme

  5. Hi Avi,I have a requirement to update the color code.Also tabs are not working sometimes need to refresh the page.can you please look into it

    1. Ok I will releasing a update soon that will let you change the theme easily using an attribute

    2. New version is uploaded in the project detail page.

  6. Thanks !!! Aninava Maiti. Your tabpanel saved by time and energy. My VF page had TabPanel and a google map and recently I started getting the below error and the Maps stopped working. I replaced the TabPAnel with your component and all is rosy now. Thanks again.

    TypeError: 'undefined' is not a function (evaluating 'this.each(function(value,index){results.push(iterator.call(context,value,index));})')

  7. It does not work in IE8.
    an error has occurred in the function loadTabs ().
    Please tell me how you can work with IE8

  8. how to set second as active by default

  9. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.