Lotus Notes Categorized View using Rico Accordian

I've just came back from a great short trip in Cambodia. Angkor Wat is just fantastic. Check out some photos here. Definitely a highly recommended place to go.

OK, back to work. I need to create quite a few categorized views. Using Lotus Notes default categorized view, the familiar expand and collapse icons will be created. Instead of using the conventional way, I search for some fresh way to display the view. I found OpenRico have a nice Accordian function. I have created a categorized view into a collapsable "table" using Rico accordion function. Here is a html example page.



Create a html view. Create a view template and include prototype.js and rico.js into the html header.
The view header and content of the view will include the required <div> tags. Attached is a sample database. The view should generate the html as per below:

<div id="accordionDiv">
<div id="overviewPanel">
<div id="overviewHeader">
<b><span class="col1">Reference</span>
<span class="col2">Date</span>
<span class="col3">Customer</span></b>
</div>
</div>
<div id="overviewPanel1.1">
<div class="accordionTabTitleBar">4/2006</div>
<div class="accordionTabContentBox">
<span class="col1">190520060006ECD8</span>
<span class="col2">04/10/2006</span>
<span class="col3">Cust EA27</span><br/>
<span class="col1">19052006000E1AB8</span>
<span class="col2">04/10/2006</span>
<span class="col3">Cust e15e7</span>
</div>
</div>
<div id="overviewPanel1.2">
<div class="accordionTabTitleBar">5/2006</div>
<div class="accordionTabContentBox">
<span class="col1">19052006000E9256</span>
<span class="col2">05/19/2006</span>
<span class="col3">May E8CB0</span><br/>
<span class="col1">19052006000EA769</span>
<span class="col2">05/19/2006</span>
<span class="col3">asdf</span><br/>
</div>
</div>
</div>

Download this sample database to try it out.