I added code here for “Yii Accordion” from my experience. The topics are
Yii Default Accordion
This is the default jquery accordion using yii.
&l;t?php $this->widget('zii.widgets.jui.CJuiAccordion',array( 'panels'=>array( 'panel 1'=>'content for panel 1', 'panel 2'=>'content for panel 2', // panel 3 contains the content rendered by a partial view 'panel 3'=>$this->renderPartial('_renderpage',null,true), ), // additional javascript options for the accordion plugin 'options'=>array( 'animated'=>'bounceslide', 'style'=>array('minHeight'=>'100'), ), )); ?>
Yii Accordion Auto Height True/False
We can set the height based on content to accordion. If you set the autoHeight to false, Every accordion tab will take the height from maximum height of tabs.
&l;t?php $this->widget('zii.widgets.jui.CJuiAccordion',array( 'panels'=>array( 'panel 1'=>'content for panel 1', 'panel 2'=>'content for panel 2', // panel 3 contains the content rendered by a partial view 'panel 3'=>$this->renderPartial('_renderpage',null,true), ), // additional javascript options for the accordion plugin 'options'=>array( 'collapsible'=> true, 'animated'=>'bounceslide', 'autoHeight'=>false, 'active'=>2, ), )); ?>
Yii Accordion Icon
Different type of icons availble in jquery accordion. They are ui-icon-circle-arrow-s, ui-icon-circle-arrow-e, ui-icon-minus, ui-icon-plus
&l;t?php $this->widget('zii.widgets.jui.CJuiAccordion',array( 'panels'=>array( 'panel 1'=>'content for panel 1', 'panel 2'=>'content for panel 2', // panel 3 contains the content rendered by a partial view 'panel 3'=>$this->renderPartial('_renderpage',null,true), ), // additional javascript options for the accordion plugin 'options'=>array( 'animated'=>'bounceslide', 'icons'=>array( "header"=>"ui-icon-plus",//ui-icon-circle-arrow-e "headerSelected"=>"ui-icon-circle-arrow-s",//ui-icon-circle-arrow-s, ui-icon-minus ), ), )); ?>
Dynamic Yii Accordion Menu With Color
We can create the dynamic menu and assign the dynamic value for yii accordion with color
&l;t?php
$tablist=array("Red","Green","Blue");
foreach($tablist as $tabs){
$css='';
if($tabs=='Red'){$css='color:red;';}
else if($tabs=='Green'){$css='color:green;';}
else if($tabs=='Blue'){$css='color:blue';}
$tabarray["$tabs"]="$tabs Color";
}
$this->widget('zii.widgets.jui.CJuiAccordion',array(
'panels'=>$tabarray,
// additional javascript options for the accordion plugin
'options'=>array(
'animated'=>'bounceslide',
'icons'=>array(
"header"=>"ui-icon-plus",//ui-icon-circle-arrow-e
"headerSelected"=>"ui-icon-circle-arrow-s",//ui-icon-circle-arrow-s, ui-icon-minus
),
),
));
?>