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
9 Rico.onLoad( function() {
\r
10 var label=Rico.$('BaseLib');
\r
11 if (label) label.innerHTML=Rico.Lib+' '+Rico.LibVersion;
\r
12 new Rico.Accordion( 'accordionExample', {panelHeight:200, cookieName: 'Rico.AccCookie'});
16 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
17 <style type="text/css">
\r
28 <h1>Rico Accordion with Memory</h1>
30 <p id='libname'>Base Library: <span id='BaseLib'></span>
\r
33 <div id="accordionExample">
40 <br>This example remembers the panel you had open the
\r
41 last time you visited. Simply provide a value for options.cookieName. This option
\r
42 also applies to tabbed panels. By default, the cookie value is only remembered
\r
43 for the current session. To have it persist longer, also set options.cookieDays.
52 <br>The example HTML structure is an outer div that holds all of the panels. Then, each panel is just a
53 couple of DIVs (one for the header and one for the content) wrapped in an outer DIV. The id attribute is
\r
54 only required on the outer div.
55 <pre> <div id="accordionID">
56 <div id="Panel1">
57 <div id="Header1">
60 <div id="Content1">
74 <br>To attach the accordion behavior to the accordion container div, construct a Rico.Accordion
75 object and pass the id of the outer accordion div to it. This is a bit different than the previous versions.
\r
77 new Rico.Accordion( 'accordionID',
\r
78 {panelHeight:200, cookieName: 'Rico.AccCookie'} );
80 The cookieName parameter causes the accordion to remember its current state in a cookie.
90 <br>The accordion is very flexible.
91 However, you do have to make sure the header and content elements are structured properly.