1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
7 <script src="LoadRicoClient.js" type="text/javascript"></script>
\r
8 <script type='text/javascript'>
\r
10 Rico.loadModule('Accordion');
\r
12 Rico.onLoad( function() {
\r
13 var label=Rico.$('BaseLib');
\r
14 if (label) label.innerHTML=Rico.Lib+' '+Rico.LibVersion;
\r
15 new Rico.Accordion( 'accordionExample', {panelHeight:200});
19 <link href="../demo.css" type="text/css" rel="stylesheet">
\r
20 <style type="text/css">
\r
31 <h1>Rico Basic Accordion</h1>
33 <p id='libname'>Base Library: <span id='BaseLib'></span></p>
\r
35 <div id="accordionExample">
42 <br>This example illustrates how to use the Rico.Accordion behavior to transform a set of
43 divs into a first class accordion component.<br><br>
44 Rico.Accordion is actually a very simple component built off of Rico behaviors and effects.
45 It adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing
55 <br>The example HTML structure is an outer div that holds all of the panels. Then, each panel is just a
56 couple of DIVs (one for the header and one for the content) wrapped in an outer DIV. The id attribute is
\r
57 only required on the outer div.
58 <pre> <div id="accordionID">
59 <div id="Panel1">
60 <div id="Header1">
63 <div id="Content1">
77 <br>To attach the accordion behavior to the accordion container div, construct a Rico.Accordion
78 object and pass the id of the outer accordion div to it. This is a bit different than the previous versions.
\r
80 new Rico.Accordion( 'accordionID', {panelHeight:200} );
82 There are many other configuration parameters that can be specified to modify various visual aspects of the
83 accordion. The panelHeight is the attribute that is most commonly overridden.
93 <br>The accordion is very flexible.
94 However, you do have to make sure the header and content elements are structured properly.