OpenRico is an excellent tool for building dynamic AJAX-style sites but it also has beautiful javascript effects for your pages.

This is a simple PHP class that will help you build an Accordion effect. Code and example provided, just read a bit more! 

file: ricoAccordion.class.php

 
/**
 * ricoAccordion Class v1.0
 * PHP wrapper class for create an openRico accordion
 * 
 * Created by jose.canciani (at) 4tm.biz
 * 
 * For updates check here:
 * http://www.4tm.biz/4tmsite/html/pensamos_post.php?id=11
 * 
 */
 
class ricoAccordion {
 
    var $name;
    var $style;
    var $class;
    var $accordionProps;
    
    var $panels;
    
    # switches, change as you like
    var $startPanel;
    
    function __construct() {
        $this->class = '';
        $this->style = '';
        $this->name = '';
        $this->accordionProps = array();
        $this->panels = array();
        $this->startPanel = 0;
    }
    
    function set($name, $value) {
        $this->{$name} = $value;
    }
    
    function load($header='',$content='') {
        $this->panels[] = array(
                            'header'=>$header,
                            'content'=>$content
        );        
    }
    
    
    function draw() {
    
        echo chr(10).'
class) {
            echo ' class="'.$this->class.'"';
        }
        if ($this->style) {
            echo ' style="'.$this->style.'"';
        }
        echo '>'.chr(10);
        $i = 0;
        foreach ($this->panels as $panel) {
            $i++;
            echo ' 
'.chr(10);
                  echo '  
'.chr(10);
                  echo $panel['header'].chr(10);
                  echo '  
'.chr(10);
                  echo '  
'.chr(10);
                  echo $panel['content'];
                  echo '  
'.chr(10);
            echo ' 
';
        }
        echo '
';
        
        echo ''.chr(10);
    }
}

Before using this code remember that your HTML page should include the prototype and rico javascript files (check openrico page for examples).

So, here is how to use it:

 
## Construct the accordion
require_once('html/ricoAccordion.class.php');
 
// create class
$accordion = new ricoAccordion;
 
// add accordion name
$accordion->set('name','profileAccordion');
 
// set some style for the accordion
$accordion->set('style','width: 500px; margin-top: 20px; margin-left: 20px;');
 
// set some of the accordion properties
// (check the accordion source js class for all of them
$accordion->set('accordionProps',array(
                                        'panelHeight'=>227,
                                        'collapsedBg'=>'#80033E',
                                        'expandedBg'=>'#80033E',
                                        'hoverBg'=>'#80033E',
                                        'borderColor'=>'#80033E'
                                    ));
 
// ...                                    
// Add the panel tabs here, replace $tabHeaderN for your
// title and $tabContentN for your content (N is the panel number)                                    
$accordion->load($tabHeader1,$tabContent1);
$accordion->load($tabHeader2,$tabContent2);
$accordion->load($tabHeader3,$tabContent3);
// ...
 
// you can set a starting panel to open at startup
// (panels begins at 0)
$accordion->set('startPanel',0);
 
// finally draw the accordion
$accordion->draw();

That’s it! Accordion should be draw after the last line. Your tab content can be almost anything. For example I’ve implemented some ajax forms for validate user data.

If you have any doubt or suggestion go ahead ad write!

Jose.