Rico Tabbed Panel - Variable Height

Base Library:


This example illustrates how to use Rico.TabbedPanel to transform a set of divs into a first class tabbed panel component.

The Rico.TabbedPanel is actually a very simple component built off of Rico behaviors and effects. It adds the necessary event handlers on the respective divs to handle the visual aspects of switching tabs.

The HTML structure for tabbed panels is an outer div that contains an unordered list (ul) to contain the titles and a div to contain the contents. Inside the unordered list is a LI element for each title. Inside the content container is a DIV element for each panel. Make sure the number of LI title elements matches the number of panel content DIV elements!

If you are only using Rico themes, then alternatively, you can use DIV elements instead of UL/LI elements to specify the titles. This method is compatible with older versions of Rico.
  <div id="tabContainer">
    <ul>
      <li>Title 1
      <li>Title 2
      <li>Title 3
    </ul>
    <div>
      <div>
        Content 1 ...
      </div>
      <div>
        Content 2 ...
      </div>
      <div>
        Content 3 ...
      </div>
    </div>
  </div>
  

To attach the tabbed panel behavior to the tabbed panel container div, construct a Rico.TabbedPanel object and pass the id of the outer div to it. This is a bit different than the previous versions.
  new Rico.TabbedPanel( 'tabContainer');
There are many other configuration parameters that can be specified to modify various visual aspects of the tabbed panel. The panelHeight is the attribute that is most commonly overridden.