Hiding and Displaying Groups of Content
You can use the af:showDetail component to display and hide groups of content. Its child components can be displayed or hidden at run time.
To display or hide contents using af:showDetail, perform the following steps:
1. Add the af:showDetail component to the JSF page and set its properties:
disclosed: Set to true if you want the component to show its children.
disclosedText: Set to the label you want to display next to the toggle icon when the contents are disclosed (shown). By default, the label is “Hide.”
undisclosedText: Set to the label you want to display next to the toggle icon when the contents are undisclosed (hidden). The default label is “Show.” Note: If you specify a value for either disclosedText or for undisclosedText, but not for both, then that value is used for both the disclosed state and undisclosed state. Instead of using text specified in disclosedText and undisclosedText, you could use the prompt facet to add a component that will render next to the toggle icon.
2. Insert the children components for display into af:showDetail. You can wrap the children in, for example, af:panelGroupLayout, to achieve the desired layout.