1. Requirements
2. Usage
3. Notes
4. Change log
5. Resources
6. Similar extension

Make any containers collapsible (fieldset,portlet,div,ul ...). The lightweight extension uses the jQuery function 'slideToggle' to collapse/expand the containers. An arrow will be added to the title of the container by default, but you can switch off this feature.

Note:

• If you update to v1.1.2 don't forget to delete the published assets.

Requirements ¶

Should work with Yii 1.1 or above

Usage ¶

• extract the files under .../protected/extensions

In the Yii blog demo add this code at the top of views/post/index.php

<?php
$this->widget('ext.slidetoggle.ESlidetoggle',
  array(
   'itemSelector' => 'div.post',
   'titleSelector' => 'div.post .title',
   'collapsed' => 'div.post',
  ));
?>

All posts should appear collapsible now, collapsed by default.

Details

The properties

• itemSelector (container)
• titleSelector (title to click)
• collapsed (selector for containers collapsed by default)

have to be assigned as jQuery selector terms.

More options

• arrow: true/false
• duration: 'slow','fast' or time in ms
• easing: 'linear','swing','easeInExpo','easeInSine' ... see jQuery Easing Plugin
• cssFile: if you want to display a custom arrow. See assets/css/jquery.slidetoggle.css

Note: The title tag must be a child of the container tag.

Example view:

<?php

/**
 * 1. Fieldsets
 *
 * Default settings of the widget.
 * This will make all fieldsets in a view collapsible, expanded by default.
 * An arrow will be added to the legend.
 *
 * Note - see HTML:
 * Better to use a single div as wrapper in the fieldset for all elements,
 * otherwise each child element will be toggled separately
 */

$this->widget('ext.slidetoggle.ESlidetoggle');


/**
 * 2. Standard Yii portlets
 * This will make all portlets in a view collapsible, expanded by default.
 */
 
$this->widget('ext.slidetoggle.ESlidetoggle',
array(
	'itemSelector' => '.portlet',
	'titleSelector' => '.portlet-decoration',
	//'collapsed' => '.portlet', //uncomment to show all collapsed
	'arrow' => false, //comment to show the toggle arrow
));


/**
 * 3. Custom div tags
 *
 * Note - see HTML: 
 * The title must be a child of the collapsible div in the HTML code.
 *
 */

$this->widget('ext.slidetoggle.ESlidetoggle',
array(
     'itemSelector' => 'div.collapsible',
     'titleSelector' => 'div.collapsible h3',
     //only the collapsible div container with the class 'closed' is collapsed by default
     'collapsed' => 'div.collapsible.closed', //a subset of the itemSelector
));


/**
 * 4. Unordered lists
 *
 * Note - see HTML: 
 * Add the title as a child of the ul-tag in the HTML code.
 * Every li-tag will be toggled separately.
 */

$this->widget('ext.slidetoggle.ESlidetoggle',
array(
	'itemSelector' => 'ul.collapsible',
	'collapsed' => 'ul.collapsible', //all collapsed
	'titleSelector' => 'ul.collapsible .caption',
));

?>

<fieldset>
  <legend>The first fieldset</legend>
  <div>
    <label>Input</label>
    <input type="text"/>
    <label>Radio</label>
    <input type="radio"/>
  </div>
</fieldset>

<fieldset>
  <legend>The second fieldset</legend>
  <div>
    <label>Input</label>
    <input type="text"/>
    <label>Checbox</label>
    <input type="checkbox"/>
  </div>
</fieldset>

<div class="collapsible">
   <h3>Title 1</h3>
   <p>The first collapsible content</p>
</div>

<div class="collapsible closed">
   <h3>Title 2</h3>
   <p>The second collapsible content 2</p>
</div>


<ul class="collapsible">
 <span class="caption" style="margin-left:-1.5em;">Collapsible caption</span>
 <li>Item1</li>
 <li>Item2</li>
 <li>Item3</li>
</ul>

Change the effect of toggle movement by setting the 'duration' and 'easing' property.

$this->widget('mongocms.extensions.slidetoggle.ESlidetoggle',
array(
   'duration' => 'slow', //'fast' or time in ms between 200 and 600
   'easing' => 'swing', //'linear','easeInOutSine','easeInCirc','easeInElastic' ...
));

Notes ¶

• You can change the image and position of the arrow in jquery.slidetoggle.css, so you can use a [+]/[-] at the right side instead an arrow at the left. Don't forget to delete the assets folder after changing the css file.

• Values for 'easing': See jQuery Easing Plugin

Change log ¶

• v1.1 Added jQuery Easing Plugin for more easing methods
• v1.1.1 Bugfix: removed comma from last options array item in jquery.slidetoggle.js; slidetoggle didn't work in IE
• v1.1.2
• Bugfix in css file: Arrow did change background color to transparent;
• Should work with Yii version < 1.1.6

Resources ¶

• jQuery selectors

Similar extension ¶

• yii-collapsible-fieldset