JQTwistyContrib

Lightweight twisty plugin

JQTwistyContrib is a lightweight twisty plugin implementing a subset of the features provided by TwistyPlugin, but using javascript only. This comes in handy when a twisty is needed but without having to render it using the Foswiki backend server.

A "twisty" is a collabsable area to hide/show certain areas of a webpage.

Usage

A twisty consists of two elements: a trigger and a container. When the trigger is clicked by the user, the container will be collapsed or expanded. The behavior of the twisty is configured using html5 data attributes part of the trigger element. Use the jqTwisty css class to install the twisty on a trigger element. The toggle container is then specified using a target argument, defaulting to the next adjacent html node in the tree,

<a class='jqTwisty'>click me</a>
<div>
Here comes the container.
</div>

Parameter

Name	Description	Default
openText	text of the trigger button when the container is hidden	html text of the trigger element
closeText	text to be displayed when the container is shown	same as openText
openImg	url of an image displayed when the container is hidden
closeImg	url of an image displayed when the container is shown
initialState	initial state of the container: can be 'open' or 'close'	close
target	jquer selector of container(s) to toggle their visibility	next html node following the twisty trigger

Events

State change events

JQTwistyContrib will fire an event according to the state changes of the twisty. That way you'll be able to bind additional behaviors on its base, for instance when the twisty is fully open.

Event	Description
inited.twisty	the twisty has been initialized
beforeOpen.twisty	the twisty is about to be opened
afterOpen.twisty	the twisty has been opened
beforeClosed.twisty	the twisty is about to be closed
afterClose.twisty	the twisty has been closed

Access events

You might also fire an event on the twisty itself to change the state from within javascript. See the accordion example below coordinating multiple twisties.

Event	Description
open.twisty	opens the twist
close.twisty	closes the twist

Examples

Simple

open

Multiple containers

open

State changes

open

Accordion

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Info

Author(s):	Michael Daum
Copyright:	© 2012 Michael Daum http://michaeldaumconsulting.com
License:	GPL (Gnu General Public License)
Release:	1.00
Version:	14973 (2012-06-12)
Change History:
12 Jun 2012:	initial release
Dependencies:	Name Version Description Foswiki::Plugins::JQueryPlugin >=4.00 Required.
Home page:	Foswiki:Extensions/JQTwistyContrib
Support:	Foswiki:Support/JQTwistyContrib