zii.widgets.jui.CJuiAccordion tab numbering

If tabs have unique id’s then it is possible to navigate directly to a specific accordion panel on a page if the ‘navigation’ option is set to true.

Example /index.php?&r=site/educational/#2 takes you to the page and opens tab 2 on page load.

This is easy to achieve by hacking the core library (which of course we never do!) but I think it is an unobtrusive and useful addition.

In your view make sure ‘navigation’ option is set to true.

$this->widget('zii.widgets.jui.CJuiAccordion', array(


     // additional javascript options for the accordion plugin







In my case I am creating tab content on the fly

$page = Webpage::model()->named($pageName)->find();


$tabData = Pagedata::model()->pageID($page->id)->tabOrder()->findAll();



foreach($tabData as $tab){

$data[$tab->name] = $tab->data;


Modification to core files to make this work

Modify header template var

public $headerTemplate='<h3><a href="#{tabnum}">{title}</a></h3>';

Add a counter var

 public $tabnum=0;

Change one line of the ‘run’ function

echo strtr($this->headerTemplate,array('{title}'=>$title,'{tabnum}'=>++$this->tabnum))."\n";

Just an idea, I can’t see why it would be problem for anyone.


I may be wrong, but IIRC the "activate" option would allow absolute navigation. If so you should be able to pass an initial value to the widget as is.

At least I use this for relative navigation

  n = $("#accordion").accordion("option", "active");

  $("#accordion").accordion("activate", n+1);

(In my case I tab forward/backwards through wizard-like field subsets of a CActiveForm, ‘navigation’: default value)



Just realized the main purpose for your solution: to generate html anchors. BTW, relative "subform" navigation is a bit off-topic, please disregard.

Thanks for your post Tommy, it helped me with one more piece of the puzzle.

I think I would change my code to

echo strtr($this->headerTemplate,array('{title}'=>$title,'{tabnum}'=>$this->tabnum ++))."\n";

This way the id would match the internal index used by the widget.

To open a tab from another tab on the same page I used

<a href="javascript:jQuery('#accordion').accordion('activate',5);">blah blah blah</a>

I still think it’s a good idea to have these unique id’s in the tabs. For example on my site I want to have a site map and be able to link to a specific panel. Most if not all pages will use the accordion widget.


A little update here

the above mentioned href didn’t work in firefox (it worked in chrome)

So I rethought the whole thing and it seems I can do what I need without any mods to the core libraries.

I put this code in the head section of my layout/main.php




        $tabnum = $_GET['tab'];

        Yii::app()->clientScript->registerScript('setTab',"$(\"#accordion\").accordion( \"option\", \"active\",$tabnum  );",CClientScript::POS_READY);



Access to any page and panel can be optained this way


so now the end of my page looks like this

<script type="text/javascript" src="/assets/9bae4ce6/js/jquery-ui.min.js"></script>

<script type="text/javascript">


jQuery(document).ready(function() {


$("#accordion").accordion( "option", "active",5  );

                        $("#jqbm4c0d0c8ba7d16").bookmark({sites:['facebook','linkedin','myspace','twitthis','yahoo','google','delicious'],addEmail:true,popup: true,compact: true,addFavorite: true});




So no changes required using this method!


Thanks for sharing your solution.