1. Requirements
2. Usage
3. Change log
4. Resources for the jQuery plugin

JCollapsibleFieldset is a widget that encapsulates the jQuery coolfieldset plugin.
If you need to create collapsible and expandable fieldset to make large forms clear, this widget might be helpful.
The plugin was inspired by Drupal. Drupal does a great job in using collapsible fieldsets.

Requirements ¶

Yii 1.1.6 or above

Usage ¶

• extract the file under .../protected/extensions
• put in a view a code blocks like the following...

<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'login-form',
	'enableAjaxValidation'=>true,
)); ?>

<h2>Example 1 - Default state</h2>
    <?php $this->beginWidget('ext.coolfieldset.JCollapsibleFieldset', array(
        'legend'=>'Default'
    )); ?>
    <p>By default the <b>fieldset</b> is opened or expanded at start. Click on its <b>legend</b> to close or collapse it.</p>
    <?php $this->endWidget(); ?><!-- collabsible fieldset -->

<h2>Example 2 - Create only a fieldset without registration of Javascript/CSS-Files</h2>
    <?php $this->beginWidget('ext.coolfieldset.JCollapsibleFieldset', array(
        'onlyFieldset'=>true,
        'legend'=>'A normal Fieldset'
    )); ?>
    <p>For more details on how to further develop this application, please read
    the <a href="http://www.yiiframework.com/doc/">documentation</a>.
    Feel free to ask in the <a href="http://www.yiiframework.com/forum/">forum</a>,
    should you have any questions.</p>
    <?php $this->endWidget('ext.coolfieldset.JCollapsibleFieldset'); ?><!-- collabsible fieldset -->

<h2>Example 3 - Closed at start</h2>
    <?php $this->beginWidget('ext.coolfieldset.JCollapsibleFieldset', array(
        'collapsed'=>true,
        'legend'=>'Closed at start',
        'legendHtmlOptions'=>array('title'=>'Click me with the mouse!')
    )); ?>
<p>If we want the fieldset to be closed or collapsed at start, just set the property <b>{collapsed:true}</b>.</p>
    <?php $this->endWidget('ext.coolfieldset.JCollapsibleFieldset'); ?><!-- collabsible fieldset -->
<h2>Example 4</h2>
    <?php $this->beginWidget('ext.coolfieldset.JCollapsibleFieldset', array(
        'collapsed'=>false,
        'animation'=>false,
        'legend'=>'Notes :'
    )); ?>
    <ul>        
        <li>Edit the <b>jquery.coolfieldset.css</b> to change the fieldset style.</li>
    </ul>
    <?php $this->endWidget('ext.coolfieldset.JCollapsibleFieldset'); ?><!-- collabsible fieldset -->

	<div class="row buttons">
		<?php echo CHtml::submitButton('Login'); ?>
	</div>

<?php $this->endWidget(); ?>
</div><!-- form -->

Change log ¶

Version 1.0 ¶

• initial release

Version 1.1 ¶

• published demo
• code cleaning

Resources for the jQuery plugin ¶

• homepage
• demo