There is not now, nor has there ever been, nor will there ever be, any programming language in which it is the least bit difficult to write bad code.

Simple Accordion rich:accordion

The rich:accordion component is a set of panels where one panel is expanded, while the other ones are collapsed. This is similar to, and inherits much of the features from the rich:togglePanel, and rich:tabPanel. See the descriptions of these components for details on switch-types, and shortcuts.

The following example shows the usage of the rich:accordion in client mode:

RichFaces is a component library for JSF and an advanced framework for easily integrating AJAX capabilities into business applications.
  • 100+ AJAX enabled components in two libraries
  • a4j: page centric AJAX controls
  • rich: self contained, ready to use components
  • Whole set of JSF benefits while working with AJAX
  • Skinnability mechanism
  • Component Development Kit (CDK)
  • Dynamic resources handling
  • Testing facilities for components, actions, listeners, and pages
  • Broad cross-browser support
  • Large and active community

JSF 2 and RichFaces 4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<ui:composition xmlns=""
    width: 500px;
.rf-ac-itm-c {
    height: 220px;
        <rich:accordion switchType="client">
            <rich:accordionItem header="Overview:">
                <h:graphicImage value="/images/icons/common/rf.png"
                    style="float:right" />
        RichFaces is a component library for JSF and an advanced framework for
        easily integrating AJAX capabilities into business applications.
                    <li>100+ AJAX enabled components in two libraries</li>
                    <li>a4j: page centric AJAX controls</li>
                    <li>rich: self contained, ready to use components</li>
                    <li>Whole set of JSF benefits while working with AJAX</li>
                    <li>Skinnability mechanism</li>
                    <li>Component Development Kit (CDK)</li>
                    <li>Dynamic resources handling</li>
                    <li>Testing facilities for components, actions, listeners, and
                    <li>Broad cross-browser support</li>
                    <li>Large and active community</li>
            <rich:accordionItem header="JSF 2 and RichFaces 4:">
                <p>We are working hard on RichFaces 4.0 which will have full JSF
                2 integration. That is not all though, here is a summary of updates
                and features:</p>
                    <li>Redesigned modular repository and build system.</li>
                    <li>Simplified Component Development Kit with annotations,
                    faces-config extensions, advanced templates support and more..</li>
                    <li>Ajax framework improvements extending the JSF 2
                    <li>Component review for consistency, usability, and redesign
                    following semantic HTML principles where possible.</li>
                    <li>Both server-side and client-side performance optimization.</li>
                    <li>Strict code clean-up and review.</li>

  • Ajax Action

  •   a4j:ajax
      Command Button Simple
      Command Link Simple
      jsFunction Simple
      Poll Simple
      Param Simple Usage
      Parameters for non-Ajax components
      Parameters from client side

  • Ajax Queue

  •   Queue

  • Ajax Output/Containers

  •   outputPanel Simple
      Auto update for h:messages component
      Common status for view
      Status Simple
      Referenced status
      Referenced status
      mediaOutput for image output
      Log usage

  • Validation

  •   Standard JSF Validators
      JSR-303 Validators
      Password Validation
      Simple rich:message sample
      Simple rich:messages sample

  • Data Iteration

  •   Simple Grid Creation
      Data Table Basic
      Data Table Styling
      Data Table Sorting
      Data Table Filtering
      Data Table Edit
      ExtendedData Table Basic Usage
      ExtendedData Table Selection usage
      rich:collapsibleSubTable Basic Usage
      DataScroller Basic Usage
      DataScroller API
      Data Lists Component
      Data Grid Component

  • Trees

  •   Simple tree from XML
      Simple treeModelRecursiveAdaptor usage

  • Output/Panels

  •   Simple Panels
      Look and feel customization
      Simple Toggle Panel
      Wizard creation
      Simple Tab Panels rich:tabPanel
      Selected Tab Management
      Simple Collapsible Panel rich:collapsiblePanel
      Simple Accordion rich:accordion
      Simple popup example rich:popupPanel
      Modal panel example
      Login panel positioning
      ProgressBar in ajax mode rich:progressBar
      ProgressBar in client mode
      Simple tooltips rich:tooltip

  • Menus

  •   Simple Panel Menu rich:panelMenu
      Simple Toolbar rich:toolbar
      Icons Customization
      Top Menu rich:dropDownMenu
      Side Menu rich:dropDownMenu

  • Inputs and Selects

  •   Autocomplete in Cached Ajax mode rich:autocomplete
      Custom client filter
      Simple Calendar rich:calendar
      Client Side Styling Disablement rich:calendar
      Data Model Support
      Different Sliders samples rich:inputNumberSlider
      Different Spinners samples rich:inputNumberSpinner
      Inplace Inputs samples rich:inplaceInput
      Inplace Selects samples rich:inplaceSelect
      Upload images rich:fileUpload
      Drag and Drop usage example rich:dragIndicator
      Drag Indicator usage example rich:dragIndicator

  • Miscellaneous

  •   Standard elements skinning feature
      RichFaces Functions
      Table Filtering using componentControl and API rich:componentControl
      Passing hash options to rich:popupPanel
      jQuery usage