My Portal Project

An idea from the CodeIgniter user guide used the Scriptaculous “blind” effect to show/hide the table of contents for the guide. By the strange force that is fate, I came across the Rico Accordion effect on the same day. Both of those came the day before I had to decide how to implement the online help for my content management system. Like peanut butter and chocolate, they just came together.

The “blind” effect is a Scriptaculous effect that makes a DIV appear as if it was a blind being pulled down. The Rico Accordion effect takes multiple sections of a page and collapses them like an accordion, allowing the user to show individual sections with a click. Below is a simple and slick way to place your help on every page of your web application, show it on demand without screwing up your form placements (like some context helps), and still not take up and entire page to do it. The “Help Screen” tab is normally at the top of the page, just for demo purposes it is below. Simply click the “Help Screen” link to see the “Help Accordian”.

The code is pretty cut and dry, starting with the typical Scriptaculous files and the Rico effects file

<script type='text/javascript' src='/scriptaculous-js-1.5.3/lib/prototype.js'></script>
<script type='text/javascript' src='/scriptaculous-js-1.5.3/src/scriptaculous.js'></script>
<script type='text/javascript' src='/js/rico.js'></script>

Then there is the personal touch with CSS:

<style type="text/css"> 
   .accordionTabTitleBar { 
      font-size: 12px; 
      padding : 4px 6px 4px 6px;
      border-style : solid none solid none;
      border-top-color: #BDC7E7; 
      border-bottom-color : #182052;
      border-width: 1px 0px 1px 0px; 
      cursor:pointer;
   } 
   .accordionTabContentBox { 
      font-size : 11px;
      border : 1px solid #1f669b; 
      border-top-width : 0px;
      padding : 0px 8px 0px 8px;
   }
</style>

The blind effect is performed against a wrapper DIV that I called simply ‘d1′. Within that DIV is the parent wrapper for the accordian effect. The Rico accordian needs a seperate DIV for each “section” of the accordian, then a DIV for the title bar, and a DIV for the content. The code for my sample is this:

<div id="d1" style="display:none;">
   <div id="accordionDiv">
      <div id="overviewPanel" >
           <div id="overviewheader" class="accordionTabTitleBar ">Test</div>
           <div id="overviewtext">Text</div>
      </div>
      <div id="anotherPanel">
           <div id="overviewheader2"  class="accordionTabTitleBar ">Test2</div>
           <div id="overviewtext2">Text2</div>
      </div>
      <div id="anotherPanel2">
           <div id="overviewheader3"  class="accordionTabTitleBar ">Test3</div>
           <div id="overviewtext3">Text3</div>
      </div>
      <div id="anotherPanel3">
           <div id="overviewheader4"  class="accordionTabTitleBar ">Test4</div>
           <div id="overviewtext4">Text4</div>
      </div>
   </div>
</div>

The finishing touch is the “Click here” tab that is just a basic div with a right floater. The onClick event calls the function to show/hide the “Help Accordian”:

   <div style="width:100%;height:35px;border-style:solid none none none;">
      <div id="helpToggle" onclick="toggleHelp('d1')" style="width:150px; background-color:#63699C; float:right;color:#FFFFFF;font-weight:bold;cursor:pointer;">Help Screen
      </div>
   </div>

Lastly is the code to execute on page load, and our toggleHelp JS function:

new Rico.Accordion( $('accordionDiv'), {panelHeight:300} );
function toggleHelp(divid){
	if($(divid).style.display=='none'){
		Effect.BlindDown(divid)
	}else{
		Effect.BlindUp(divid);
	}
}

There you have it, accessible, unobtrusive, and slick online help for your web apps. All the parameters for the accordion are documented on the Rico site, so you can apply your personal touch.

This entry was posted on Sunday, May 28th, 2006 at 8:29 am and is filed under Code Bin, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.