Apex:PanelBar in Visualforce

Apex:PanelBar is a component that contains a page area that includes one or more <apex:panelBarItem> tags that can expand when a user clicks the associated header.

When an <apex:panelBarItem> is expanded, the header and the content of the item are displayed while the content of all other items are hidden. When another <apex:panelBarItem> is expanded, the content of the original item is hidden again.

An <apex:panelBar> can include up to 1,000 <apex:panelBarItem> tags.

In this Example we are using three panelBarItems and we showing a alert as soon as the user changes the section.

Visualforce Page:

<!-- Page: panelBar --> 

<!-- Click on Item 1, Item 2, or Item 3 to display the content of the panel -->

<apex:page>

    <apex:panelBar>

        <apex:panelBarItem onleave="alert('Leaving Section 1');" headerStyle="height: 30px;background:brown;" label="Section 1">Data Section 1</apex:panelBarItem>

        <apex:panelBarItem onleave="alert('Leaving Section 2');" headerStyle="height: 30px;background:brown;" label="Section 2">Data Section 2</apex:panelBarItem>

        <apex:panelBarItem onleave="alert('Leaving Section 3');" headerStyle="height: 30px;background:brown;" label="Section 3">Data Section 3</apex:panelBarItem>

    </apex:panelBar>

</apex:page>

Output: