Hi Armin,
wenn du die Funktionalität eh auf verschiedenen Seiten brauchst, würde ich schon dazu tendieren das Skript in der main.php einzubinden. Die Datei wird ja dann eh gecached und muss nicht jedes Mal aufs neue übertragen werden. Hängt aber natürlich vom Umfang deines Projekts ab und auf wie vielen Seiten du das letztendlich wirklich brauchst.
Wenn du eine seperate .js hast, die irgendwo unter protected liegt, solltest du evtl. auch darauf achten die Datei erst mit dem AssetManager zu publizieren, damit auch jeder die Datei erreichen kann sollte dein protected-Verzeichnis einmal nicht (mehr) öffentlich zugänglich sein.
$clientScript=Yii::app()->clientScript;
$assetManager=Yii::app()->assetManager;
//angenommen du legst deine .js-Skripte nach protected/js
$folderJs=YiiBase::getPathOfAlias( 'application.js' );
//angenommen dein Skripte heißt 'container.js'
$filenameContainerScript=$folderJs . DIRECTORY_SEPARATOR . 'container.js';
//Skript publizieren
$urlContainerScript=$assetManager->publish( $filenameContainerScript );
//jquery registrieren
$clientScript->registerCoreScript('jquery');
//container-Skript registrieren
$clientScript->registerScriptFile($urlContainerScript, CClientScript::POS_HEAD);
Ich hab letztens auch so eine Container realisiert, hab das JS aber direkt in the HTML-Code geschrieben. Ich hab das so gemacht, dass man <fieldset> Elemente auf- und zuklappen kann sobald ihr <legend> Element die CSS-Klasse “toggle” gesetzt hat. Den <legend> Elementen hab ich dazu noch ein Image in den Hintergrund getan, das ein “+” oder ein “-” zeigt, je nach dem ob man es auf- oder zuklappen kann (das wechseln des Images klappt aber leider nur mit dem FF 
).
CSS:
legend.toggle
{
cursor: pointer;
color: blue;
padding-right: 20px;
background-image: url("../images/bullet_toggle_minus.png");
background-repeat: no-repeat;
background-position: right;
}
JavaScript registrieren:
Yii::app()->clientScript->registerCoreScript('jquery');
//fieldsets auf-/zuklappen
Yii::app()->clientScript->registerScript(
'toggleFieldsets',
'$("legend.toggle").click(
function()
{
var img = $(this).css("background-image"); //gibt den absoluten Pfad zurück :-/
if( img.search(/bullet_toggle_minus\.png\)$/) > 1 )
{
img = img.replace( /bullet_toggle_minus\.png\)$/, "bullet_toggle_plus.png)" );
}
else
{
img = img.replace( /bullet_toggle_plus\.png\)$/, "bullet_toggle_minus.png)" );
}
$(this).siblings().toggle("slow");
$(this).css("background-image", img);
}
);'
);
HTML-Beispiel
<fieldset>
<legend class="toggle">Fieldset zum auf- und zuklappen</legend>
<!--
Der Container hier wichtig. Ohne den hat mir jquery mein Layout durcheinander gewürfelt, weil es beim
wieder einblenden von versteckten Elementen "display: block;" setzt.
-->
<div>
<!-- Bisschen Beispiel-Content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</fieldset>
Hoffe das hilft. 
