Using Panel Tabbed component

Hi,
I am developing with ADF 11g.
I am using Panel tabbed component into a page and the 'ShowDetailItem' should be increased according to requirements, But I could just create three 'ShowDetailItems' in a page .jspx since it generates too much code. Is there any way to create multiple ShowDetailItems on a page (or to be displayed on a page) without generating too much code (because in these ShowDetailItems I handle lots of information and transactions)
Please helpme...
thanks.

No, what happens is this:
While adding more tabs to the panel, the code in the page .jspx increases which is logical, but hardly manageable, since that new requirements will add many more tabs quite content to the tabbed panel. What I want is not to generate too much code in my jspx page. How can I handle this?
thanks,

Similar Messages

Updated form/table in showDetails of Panel Tabbed Component

When there are multiple showDetail components for Panel Tabbed, if anyone of them has an updated form or table, switching between different showDetail components will cause the system throw mandatory field validation errors.
It looks like all the mandatory LOV fields are reset to be empty in the previous visited tab. Is this the way that Jdev supposed to work? What should we aware of using updated forms/tables in multiple tabs of Panel Tabbed component?

That's how it works. That's the reason, I get all the data to pre-populate all the components in the page load itself. When I switch between tabs, I don't re-execute the proc and so it won't reset. I use postback to prevent re-execute the proc. when I switch between tabs.
Boolean postBackValue = (Boolean)JSFUtils.resolveExpression("#{adfFacesContext.postback}");
Boolean defaultBooleanValue = new Boolean("false");
if (postBackValue.equals(defaultBooleanValue)) {
}

Panel tab component not stretching vertically

I have a jsff page.
I have two sections in the page .
1. top is a panel header and
2. below it is a panel tab component.(ADFStretchwidth is already set .)
When i ran the page the the page is renderring, but below the tab panel Still there are some space left .
I want to render the tab to occupy the whole space .
I have already tried using a panel stretch layout but it didnot work.
Any pointers ??
Thanks
Sumit Yadav

Hi Sumit,
Try as mentioned below:
<af:panelTabbed id="pt2" dimensionsFrom="disclosedChild">
<af:showDetailItem text="#{'Tab1'}" id="sdi1"
styleClass="AFStretchWidth" stretchChildren="first" >
</af:showDetailItem>
<af:showDetailItem text="#{'Tab2'}" id="sdi2"
styleClass="AFStretchWidth" stretchChildren="first" >
</af:showDetailItem>
</<af:panelTabbed>
Thanks,
Navaneeth

Tabs without using panel tabbed

i have to create a page with multiple tabs on top of the page without using panel tabbed, since multiple users cannot work in panel tabbed.
i have created fragments for indivudual tabs.
included fragments in a bounded task flow. connected all fragments to wildcard control flow.
used a jsff with command menu items in top of the page in a pgl.
below this, i dropped task flow as region where i would like jsff to be displayed depending on command menu item selected on top.
specified command menu item action property as name of control flow case connecting wild card to individual jsffs used in page.
Navigation is not working from one to another jsff on clicking command menu item on top.
what is wrong with this approach.
jdev 11.1.1.5

it would be easier for multiple people to work on different page fragments as with panel tabbed it would be single jspx.
i m focusing on how to achieve navigation using fragments in a region and command menu items or command navigation items at the top.

Moving the tabs to right of the jsf page in the adf panel tabbed component

Hi,
i want to move the tabs in the panel tabbed component to the right. In the property inspector of this component, it doesn't have an option called right. How can we do this?
Thanks,
sudan

Hi,
why there is no reply from the community? Does it mean, no one had any requirement like this before or it is not possible in ADF.
Thanks,
Sudan

Help on Panel tabbed component

Hi everybody,
i have a panel tab with two show detail items in it.
on first show detail item, i have a button - when click should show second show detail item.
Can any help how to do this from a bean?
Thanks
KM.

Hi,
you can programatically disclose/close showdetailitem. see this http://www.youritbox.com/index.php?option=com_content&view=article&id=801&Itemid=399
~Abhijit

Nested Dashboards using Panel Set component

Hello,
I am investigating the usage of the Panel Set component. Since it is capable of hosting a SWF (presumably one created by Xcelsius) - I thought I could try this out for creating nested dashboarss, of sorts. I was able to export my SWF file from another dashboard and get it to show properly in one of the child panels. The only thing I am wondering about is that I noticed that when you maximize the panel the SWF file doesn't scale like a Panel that hosts a JPG file... it shows at the same size in the maximized windows as the "normal" window. Is this by design, or is there a setting I am missing?

Hmm. OK, maybe we have a terminology difference here. I took a Xcelsisus generated (exported) SWF file and HAVE SUCCESSFULLY put it into a panel set component. It is not being called out via a URL - it is sitting on my desktop. It does properly render in the Panel Set panel. What it doesn't do is resize when you maximize the panel.
So, are we speaking the same language here? Are you implying that if I servet that same SWF file off of a web site that it will not only display (AS IT CURRENTLY DOES) but that it will also resize as all SWF files do on your samples page on your web site?

Panel Tabbed geting invisible

Hi
I am using JDev 11.1.1.2
In the UI page, i have a panel tabbed component and inside this component i have a toolbox component where i have menu bar which contains some menu items and below that i have a table getting displayed. Both the toolbox and table are kept in panel group layout and group layout is in that panel tabbed.
When i run my page, the table is having some values inside in it. whenever i click in the middle of my table, the panel tabbed vanishes or gone .... and also the menubar item too. Only the table is placed in that panel tabbed's position....
Can anyone pls tell me why the tabbed is getting vanishes and the table is taking all the space?? When the refresh the page again all the components come back to its position ......
Please Help !!
Regards
Sudeep

any help any one !!!!

Tab Component Dynamic Visibility to Combo Boxes

I am using a Tab component. I have 3 tabs on my dashboard. I have 2 Combo boxes that I am using to filter rows of data on 3 Excel sheets. Both Combo boxes are not used on all the tabs. How can I pass example: User clicks on Tab 1 and use dynamic visibility for Combo Box 1 and Combo Box 2 are visible. If the user clicks on Tab 2 I want only Combo Box 1 to be visible.

Hi Joe,
This can be achieved in Dynamic visibility.
On click on Tab,just map to some target(say value "1") and then For Combo box,set target cell mapped for tab to 1,which means when the target cell gets "1",show the Combo box.
If you are not clear then you can refer the following URL,which will give you more informations about this.
http://everythingxcelsius.com/2008/08/tip-7-xcelsius-dynamic-visibility-video-tutorial.html
Rgds,
Murali

How to open a panel tabbed window using a button present in the same page

below is my jspx page where i have two buttons and two panel tabs. I want to open respective panel tabs using respective buttons:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" binding="#{backing_pages_bb.d1}">
<af:form id="f1" binding="#{backing_pages_bb.f1}">
<af:panelStretchLayout binding="#{backing_pages_bb.psl1}" id="psl1">
<f:facet name="bottom"/>
<f:facet name="center">
<af:panelTabbed binding="#{backing_pages_bb.pt1}" id="pt1">
<af:showDetailItem text="first"
binding="#{backing_pages_bb.sdi1}" id="sdi1"/>
<af:showDetailItem text="second"
binding="#{backing_pages_bb.sdi2}" id="sdi2"
rendered="true" disclosed="false"/>
</af:panelTabbed>
</f:facet>
<f:facet name="start"/>
<f:facet name="end"/>
<f:facet name="top">
<af:panelGroupLayout binding="#{backing_pages_bb.pgl1}" id="pgl1">
<af:commandButton text="first"
binding="#{backing_pages_bb.cb1}" id="cb1"
action="#{backing_pages_bb.cb1_action}"/>
<af:commandButton text="second"
binding="#{backing_pages_bb.cb2}" id="cb2"
action="#{backing_pages_bb.cb2_action}"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>

</jsp:root>
below is the backing bean created for the jspx page:
package view.backing.pages;
import javax.faces.component.UIComponent;
import oracle.adf.view.rich.component.rich.RichDocument;
import oracle.adf.view.rich.component.rich.RichForm;
import oracle.adf.view.rich.component.rich.layout.RichPanelGroupLayout;
import oracle.adf.view.rich.component.rich.layout.RichPanelStretchLayout;
import oracle.adf.view.rich.component.rich.layout.RichPanelTabbed;
import oracle.adf.view.rich.component.rich.layout.RichShowDetailItem;
import oracle.adf.view.rich.component.rich.nav.RichCommandButton;
public class Bb {
private RichForm f1;
private RichDocument d1;
private RichPanelStretchLayout psl1;
private RichPanelGroupLayout pgl1;
private RichCommandButton cb1;
private RichCommandButton cb2;
private RichPanelTabbed pt1;
private RichShowDetailItem sdi1;
private RichShowDetailItem sdi2;
public void setF1(RichForm f1) {
this.f1 = f1;
public RichForm getF1() {
return f1;
public void setD1(RichDocument d1) {
this.d1 = d1;
public RichDocument getD1() {
return d1;
public void setPsl1(RichPanelStretchLayout psl1) {
this.psl1 = psl1;
public RichPanelStretchLayout getPsl1() {
return psl1;
public void setPgl1(RichPanelGroupLayout pgl1) {
this.pgl1 = pgl1;
public RichPanelGroupLayout getPgl1() {
return pgl1;
public void setCb1(RichCommandButton cb1) {
this.cb1 = cb1;
public RichCommandButton getCb1() {
return cb1;
public void setCb2(RichCommandButton cb2) {
this.cb2 = cb2;
public RichCommandButton getCb2() {
return cb2;
public void setPt1(RichPanelTabbed pt1) {
this.pt1 = pt1;
public RichPanelTabbed getPt1() {
return pt1;
public void setSdi1(RichShowDetailItem sdi1) {
this.sdi1 = sdi1;
public RichShowDetailItem getSdi1() {
return sdi1;
public void setSdi2(RichShowDetailItem sdi2) {
this.sdi2 = sdi2;
public RichShowDetailItem getSdi2() {
return sdi2;
public String cb1_action() {
// Add event code here...
return null;
public String cb2_action() {
// Add event code here...
return null;
Wat method has to be coded inside cb1_action and cb2_action so that respective panels are opened.
thank u for ur help in advance.

Hi,
If the data need to be passed is large, consider using Shared Memeory Objects: Check this doc for reference: How to pass data from ABAP to Web Dynpro ABAP
Hope this helps u,
Regards,
Kiran

Using Srpy tabbed panels with slidding panels

I am very new to spry and so I am still just figuring it all
out. How I found it was I wanted a tabbed panel like the one on the
IBM website. Anyway, I am trying to
use the tabbed panels with the sliding panels and it just does not
seem to be working. I found
this
tutorial and followed the codes but it still only works as just the
tabbed panels - nothing has changed at all. Can someone tell me
what I might be doing wrong? I am attaching both my html and css
code for you to inspect.
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script
src="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link
href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 1</a></li>
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 2</a></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css code to follow in post below - too many characters.

and here is the css code
CSS Code
@charset "UTF-8";
/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab
buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container.
For our
* default style, this container does not contribute anything
visually,
* but it is floated left to make sure that any floating or
clearing done
* with any of its child elements are contained completely
within the
* TabbedPanels container, to minimize any impact or
undesireable
* interaction with other floated elements on the page that
may be used
* for layout.
* If you want to constrain the width of the TabbedPanels
widget, set a
* width on the TabbedPanels container. By default, the
TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this
selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup
container houses
* all of the tab buttons for each tabbed panel in the
widget. This container
* does not contribute anything visually to the look of the
widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in
this selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This
container houses
* the title for the panel. This is also the tab "button"
that the user clicks
* on to activate the corresponding content panel so that it
appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1
pixel down from
* where it wold normally render. This allows each tab to
overlap the content
* panel that renders below it. Each tab is rendered with a 1
pixel bottom
* border that has a color that matches the top border of the
current content
* panel. This gives the appearance that the tab is being
drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this
selector is not
* necessary to make the widget function. You can use any
class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
/* This selector is an example of how to change the appearnce
of a tab button
* container as the mouse enters it. The class
"TabbedPanelsTabHover" is
* programatically added and removed from the tab element as
the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the
appearance of a tab button
* container after the user has clicked on it to activate a
content panel.
* The class "TabbedPanelsTabSelected" is programatically
added and removed
* from the tab element as the user clicks on the tab button
containers in
* the widget.
* As mentioned above, for our default style, tab buttons are
positioned
* 1 pixel down from where it would normally render. When the
tab button is
* selected, we change its bottom border to match the
background color of the
* content panel so that it looks like the tab is part of the
content panel.
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside
of a tab button
* look like normal text. Users may want to use links inside
of a tab button
* so that when it gets focus, the text *inside* the tab
button gets a focus
* ring around it, instead of the focus ring around the
entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The
ContentGroup container houses
* all of the content panels for each tabbed panel in the
widget. For our
* default style, this container provides the background
color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in
this selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
/* This is the selector for the Content panel. The Content
panel holds the
* content for a single tabbed panel. For our default style,
this container
* provides some padding, so that the content is not pushed
up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this
selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce
of the currently
* active container panel. The class
"TabbedPanelsContentVisible" is
* programatically added and removed from the content element
as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules
above so that the
* TabbedPanels widget renders with its tab buttons along the
left side of
* the currently active content panel.
* With the rules defined below, the only change that will
have to be made
* to switch a horizontal tabbed panels widget to a vertical
tabbed panels
* widget, is to use the "VTabbedPanels" class on the
top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons
it contains
* render to the left of the active content panel. A border
is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so
that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
and CSS Sprites */
/* Revision by Craig Malcolm Petrou of CPMMUG.com */
.TabbedPanels {
margin: 10px 0 5px 0;
.TabbedPanelsTab {
font-weight: bold;
font-size: 100%;
background-color: #FFF;
border: solid 0 #FFF;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #FFF;
position: relative;
.TabbedPanelsContentGroup {
background-color: #FFF;
ul.TabbedPanelsTabGroup a {
display: block;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/brown.png) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/brown.png) no-repeat 100% 0;
padding: 7px 10px 5px 0;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/brown.png) no-repeat 0 -41px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/brown.png) no-repeat 100% -41px;
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and
CSS Sprites */
Also - is there a way to get rounded corners on the tabs in
spry? Any good tutorials I can follow about spry - more
specifically about using widgets and effects together.
Thanks so much

Help Using Spry tabbed panel as a menu.

Thanks in advance to all who take the time to read and any assistance you can offer.
I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel. I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page. For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
HELP?
http://www.orange.k12.nc.us/ec/beta/default.html

Thank you Gramps - for your prompt and helpful response! Your solution absolutely fixed the problem I asked about.
If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page. Can you look at one more page and advise please??
On the "subpages" of this site, the same tabbed panel "fake menu" exists. I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me. I'm obviously missing something in the code to send the user back to the HOME page from these pages.
In the sample link below, you will be starting from a "subpage" of the site. Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.) Can I add something to that line of code to get them back to the home page?
Again... thank you!!
http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html

Dynamic Tabs using the PanelTabbed component

I would like to use the PanelTabbed component which is bound to a managed bean to render tabs dynamically. The page will simply consist of a navigationTree on the left and the panelTabbed on the right. When the user clicks a node in the tree I would like to PPR the panelTabbed component to display the new tab. If you know of any examples or could point me in the right direction it would be greatly appreciated!
Thanks,
Matt

Hello Matt,
panelTabbed won't do for that, you're going to need navigationPane using "tabs" hint. The navigationPane should have a partialTriggers on the tree and its value should be a custom MenuModel instance that get populated from click made on the tree.
It's not overwhelming, but I fear there's some complexity in achieving what you want.
Regards,
~ Simon

Cannot use the same page template in panel tabbed

Hi,
I have a panel tabbed with region in each tab. And all the jsff uses the same pageTemplate, but the jsff displays only a blank with no error . So I apply refresh condition on the Region thinking it might be the cause, initially the two region loaded successfully but when I switch back to the first tab it throws Exception
<RegistrationConfigurator><handleError> Server Exception during PPR, #1
java.lang.NullPointerException
at oracle.adfinternal.view.faces.taglib.region.IncludeTag$RelocatedFacet.restoreFacet(IncludeTag.java:900)
at oracle.adfinternal.view.faces.taglib.region.IncludeTag.doStartTag(IncludeTag.java:200)
at oracle.adfinternal.view.faces.taglib.region.DynamicIncludeTag.doStartTag(DynamicIncludeTag.java:109)
With my investigation it shows that same pageTemplate cannot be used in panel tabbed. What seems to be the solution here? Or Am I lacking something on reusing pageTemplate across panel tabbed?
Thanks in advance.

Hi..
I think this is the not error with pages created with the page template.But may be cause some contents in the page.
anyway you will helpful following link
Re: How to resolve Server Exception during PPR, #16 ?
http://andrejusb.blogspot.com/2008/04/record-split-into-table-and-form.html

How to use H1, h3, h4 etc when using Spry Tabbed Panels?

Hi folks,
I am using Spry Tabbed Panels 2 on my site as it's the only way I know to direct visitors to particular tabs with links.
Unfortunately I can't use any of my header tags because H2 is dedicated to the Spry tabs, and for some reason has also taken "ownership" o all H tags.
Is there another way to mark my headings accordingly without having them turn into tabs?
My site is at www.qtnz.co.nz/activities
Thanks in advance for advice,
Jo

To help you on your way, have a look at the following. Just copy and paste into a new document and view in your favourite browser.
<!DOCTYPE html>
<html>
<head>

<base href="http://ajax.googleapis.com/" />

<link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
        type="text/css" rel="Stylesheet" />

<script src="/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
      // See the jQuery UI Tabs documentation for
      // more information about how this works.
      $('#tabs').tabs();
</script>
</head>
<body>
<div id="tabs">
    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1">
      <p>These tabs were created with JavaScript, CSS, and
        images hosted on Google's AJAX APIs CDN.</p>
      <p>Thanks, Google!</p>
    </div>
    <div id="tab-2">
      <h1>YEAH!</h1>
      <p>My header!</p>
    </div>
    <div id="tab-3">
      
    </div>
</div>
</body>
</html>

Using Panel Tabbed component

Similar Messages

Maybe you are looking for