Creating dojo accordion Container/panes in Zend

Try Online : Accordion Container
Dojo provide very easy and nice way of creating different containers such as accordion, tab, border, and stack etc.
These containers hold different type of panes. These different panes in turn use to hold contents. contents can be simple text or it can be complete html.
Zend Framework collaboration with Dojo has made things quite easy. Zend Framework provide view helpers to achieve different type of dojo functionality.
In this article I am going to discuss how to create Accordion Container. accordion Container hold accordion panes. Each accordion pane hold different contents and open in a stylish way when user click on the title of the pane.
In order to enable dojo helpers in you Zend Framework application, you will need to make some initial configuration. read my tutorial "Zend Framework and Dojo: configuration" before reading this tutorial. After successfull configuration create a controller called "ContinerController.php" in your controllers directory and place the following code in it.

<?php
class ContainerController extends Zend_Controller_Action
{
   public function accordionAction()
   {
      
   }
}

We have only defined an action in our controller, putting no code at all. you however can put whatever code you wish.
Now in /application/views/scripts/container/accordion.phtml place the following code.

<?php

$this->accordionContainer()->captureStart('main-container',
                                      array('design' => 'headline'),
                                      array(
                                              'style'=>'height:400px;width:400px'
                                       ));

echo $this->accordionPane(
     'home',
   'This is home page',
   array('region' => 'top','title'=>'Home'),
   array('style' => 'background-color: white;')
);

echo  $this->accordionPane(
   'gallery',
   'Contents of gallery here',
   array('region' => 'left', 'title'=>'Gallery'),
   array('style' => 'background-color: white;')
);
                                 
echo $this->accordionPane(
   'Blog',
   'Blog post here',
   array('region' => 'center','title'=>'Blog'),
   array('style' => 'background-color: white;')
);

echo $this->accordionContainer()->captureEnd('main-container');
?>

The code is pretty simple. we first call captureStart() method on accordionContainer(). this will start accordion container for us.
Once the accordion continer is started, we need to put accordion panes in it and at the end we will need to call captureEnd() method to end our accordion container.
The container holding the following accordion pane.

echo $this->accordionPane(
     'home',
   'This is home page',
   array('region' => 'top','title'=>'Home'),
   array('style' => 'background-color: white;')
);

The above code call accordionPane() helper method. This dojo helper method take an "id", "contents" to be displayed in the accordion pane, an array containing the special attributes of the accordion pane, and array of css attributes.