Yii Accordion

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
        ),
    ),
));
?>