I’m having trouble getting Jquery UI Accordion to work withing a form (modified from the Update form that the UI creator makes). Here’s my code:
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'order-form',
'enableAjaxValidation'=>false,
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php $this->renderPartial('_form-section-order-summary', array('form'=>$form, 'model'=>$model)); ?>
<?php $this->widget('zii.widgets.jui.CJuiAccordion', array(
'panels'=>array(
'Customer Details'=>$this->renderPartial('_form-section-customer-details', array('form'=>$form, 'model'=>$model)),
'E-Commerce'=>$this->renderPartial('_form-section-ecommerce', array('form'=>$form, 'model'=>$model)),
'User Data'=> $this->renderPartial('_form-section-user-data', array('form'=>$form, 'model'=>$model)),
'Text Messaging'=>$this->renderPartial('_form-section-text-messaging', array('form'=>$form, 'model'=>$model)),
'Other Options'=>$this->renderPartial('_form-section-other-options', array('form'=>$form, 'model'=>$model)),
),
// additional javascript options for the accordion plugin
'options'=>array(
'animated'=>'bounceslide',
),
));
?>
Each of those partial views is a separate file contaning a section of the form. When I run this, it displays the entire form (including all the sections), and then the Jquery accordion sections (without content) appear at the bottom, below the form.
How do I fix this?