slidetoggle Make containers collapsible (fieldset,portlet,div,ul ...)

  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

Similar extension

6 0
22 followers
1 647 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: Joblo
Created on: Apr 25, 2011
Last updated: 13 years ago

Downloads

show all

Related Extensions