%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE%
%TWISTY{some parameters}% Collapsing content %ENDTWISTY%
:
%TWISTY{}% my twisty content %ENDTWISTY%Will generate:
%TWISTY{}%
but the show and hide links do have text! The default values are fetched from plugin settings TWISTYSHOWLINK
and TWISTYHIDELINK
, see Plugin Settings below.
div
, that is, the contents is displayed as block element, displayed on the next line.
If you want to show the Twisty contents on the same line - inline - use mode="span"
:
%TWISTY{ mode="span" }% my twisty content %ENDTWISTY%Will generate: my twisty content Note that if animations are on (using
TWISTYPLUGIN_TWISTYANIMATIONSPEED
), you won't see animations with inline mode.
%TWISTY{ showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this:
%TWISTY{ showlink="Show" hidelink="Hide" showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%
remember="on"
.%TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%
remember="off"
:
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that
id
sets a site wide cookie. To create a unique id, add topic or web macros:
id="%WEB%_%TOPIC%_currentCustomerList"
start="show"
.
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%
start="hide"
to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide" start="hide" }% my twisty content %ENDTWISTY%
firststart="show"
.
If remember="on"
is used, subsequential visits to the page will display the Twisty according the cookie setting.
%TWISTY{ showlink="Show..." hidelink="Hide" firststart="show" }% my twisty content %ENDTWISTY%
foswikiJs
to indicate the availability of JavaScript (the class is set to the html
tag if JavaScript is available).
showlink="" hidelink=""
to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="foswikiButton" value="You surely have !JavaScript" /> %ENDTWISTY%
start="show"
to show the Twisty content at all.
When JavaScript is off, the button should be invisible.
This code will show the button when JavaScript is off:
%TWISTY{ link="" start="show" }% <input type="submit" class="foswikiButton" value="You might have !JavaScript" /> %ENDTWISTY%
class
to style the content div or class:
%TWISTY{ showlink="Show..." hidelink="Hide" class="foswikiHelp" }% my twisty content %ENDTWISTY%Generates:
linkclass
to style the twisty links:
%TWISTY{ showlink="Show..." hidelink="Hide" linkclass="foswikiButton" }% my twisty content %ENDTWISTY%Generates:
twistyExpandAll
or twistyCollapseAll
.
<button class="twistyExpandAll foswikiButton">Expand all</button> <button class="twistyCollapseAll foswikiButton">Collapse all</button>Creates these controls: When you want to use links, write:
#VarTOGGLE <a href="#TOGGLE" class="twistyExpandAll">Expand all</a> <a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>Expand all Collapse all
Escape: | Expands To: |
---|---|
$n or $n() |
New line. Use $n() if followed by alphanumeric character, e.g. write Foo$n()Bar instead of Foo$nBar |
$nop or $nop() |
Is a "no operation". |
$quot |
Double quote (" ) |
$percnt |
Percent sign (% ) |
$dollar |
Dollar sign ($ ) |
link="%Y%"but use format tokens:
link="$percntY$percnt"... to get:
link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens:
link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)"
id
, the plugin autogenerates an ID based on web and
topic names.
ID is then appended with either a counter that counts from 1 for each
twisty if remember option is set, or a random number (useful for AJAX calls).
ENDTWISTY
tag.
Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
Parameter | Value | Description | Remark |
---|---|---|---|
id |
Unique identifier | Used to link TWISTYBUTTON and TWISTYTOGGLE | optional |
link |
Link label | Link label for both show and hide links | optional |
hidelink |
Link label | Hide link label | optional |
showlink |
Link label | Show link label | optional |
mode |
"div" or "span" |
Specify if the Twisty Toggle section will use a <div> or a <span> tag. Note that if the contents contains block elements such as div , mode should be div as well to create valid HTML markup. |
optional, defaults to <div> |
showimgleft |
Image url | Specify the url of an image that will be displayed with the show link at the left side of the link. You may use ICONURLPATH to display one of the DocumentGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
hideimgleft |
Image url | Specify the url of an image that will be displayed with the hide link at the left side of the link. You may use ICONURLPATH to display one of the DocumentGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
showimgright |
Image url | Specify the url of an image that will be displayed with the show link at the right side of the link. You may use ICONURLPATH to display one of the DocumentGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
hideimgright |
Image url | Specify the url of an image that will be displayed with the hide link at the right side of the link. You may use ICONURLPATH to display one of the DocumentGraphics icons. Alternatively use an image attached to the topic. |
optional, defaults to no image |
remember |
"on" , "off" |
If "on" , the Twisty state is remembered the next time the page is shown. If "off" , the stored setting will be cleared.
|
optional, no default |
start |
"hide" or "show" |
Initial state of the Twisty; this will override any setting stored in a cookie (see remember ). |
optional, default no initial state |
firststart |
"hide" or "show" |
Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see remember ). |
optional, default no initial state |
noscript |
"hide" |
Make content hidden in case use does not have JavaScript on | optional, default content is shown in case JavaScript if off |
class |
CSS class name | Class for Twisty div or span | optional, default none |
linkclass |
CSS class name | Class for link | optional, default none |
prefix |
Text | Text to display before the show/hide links | optional, default none |
suffix |
Text | Text to display after the show/hide links | optional, default none |
img |
Image url | Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright. | optional, defaults to no image |
imgleft |
Image url | Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright. | optional, defaults to no image |
imgright |
Image url | Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright. | optional, defaults to no image |
hideimg |
Image url | Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright. | optional, defaults to no image |
showimg |
Image url | Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright. | optional, defaults to no image |
%ENDTWISTY%
noscript
and class
(only used for 'toggle' content)
mode
: button mode defaults to div
%TWISTYBUTTON{id="myid" ... }%
Parameter | Value | Description | Remark |
---|---|---|---|
mode | "div" or "span" | Specify if the Twisty button will use a <div> or a <span> tag. Note that if the contents contains block elements such as div , mode should be div as well to create valid HTML markup. | optional, defaults to <div> |
%TWISTYBUTTON{ id="myid" link="more" }%%TWISTYTOGGLE{ id="myid" }%content%ENDTWISTYTOGGLE%
%TWISTYSHOW{id="myid" ... }%
Parameter | Value | Description | Remark |
---|---|---|---|
id | Unique identifier | Used to link TWISTYSHOW, TWISTYHIDE and TWISTYTOGGLE | required |
link | Link label | Show link label | optional |
mode | "div" or "span" | Specify if the Twisty Show link will use a <div> or a <span> tag. Note that if the contents contains block elements such as div , mode should be div as well to create valid HTML markup. | optional, defaults to <div> |
img | Image url | Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the DocumentGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
imgleft | Image url | Specify the url of an image that will be displayed at the left side of the link. You may use ICONURLPATH to display one of the DocumentGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
imgright | Image url | Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the DocumentGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
remember | "on" , "off" | If "on" , the Twisty state is remembered the next time the page is shown. If "off" , the stored setting will be cleared.Note: when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
start | "hide" or "show" | Initial state of the Twisty; this will override any setting stored in a cookie (see remember ). | optional, default no initial state |
firststart | "hide" or "show" | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see remember ). | optional, default no initial state |
%TWISTYSHOW{id="demo" link=" Click to Unfold " imgleft="%ICONURLPATH{toggleopen}%"}%
%TWISTYHIDE{id="myid" ... }%
Parameter | Value | Description | Remark |
---|---|---|---|
id | Unique identifier | Used to link TWISTYSHOW, TWISTYHIDE and TWISTYTOGGLE | required |
link | Link label | Hide link label | optional |
mode | "div" or "span" | Specify if the Twisty Hide link will use a <div> or a <span> tag. Note that if the contents contains block elements such as div , mode should be div as well to create valid HTML markup. | optional, defaults to <div> |
img | Image url | Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the DocumentGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
remember | "on" , "off" | If "on" , the Twisty state is remembered the next time the page is shown. If "off" , the stored setting will be cleared.Note: when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
start | "hide" or "show" | Initial state of the Twisty; this will override any setting stored in a cookie (see remember ). | optional, default no initial state |
firststart | "hide" or "show" | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see remember ). | optional, default no initial state |
%TWISTYHIDE{id="demo" link=" Click to Fold " imgleft="%ICONURLPATH{toggleclose}%"}%
%TWISTYTOGGLE{id="myid"}%
Parameter | Value | Description | Remark |
---|---|---|---|
id | Unique identifier | Used to link TWISTYSHOW, TWISTYHIDE and TWISTYTOGGLE. | required |
mode | "div" or "span" | Specify if the Twisty Toggle section will use a <div> or a <span> tag. Note that if the contents contains block elements such as div , mode should be div as well to create valid HTML markup. | optional, defaults to <div> |
class | CSS class name | Class for content div or span | optional, default none |
linkclass | CSS class name | Class for link | optional, default none |
remember | "on" , "off" | If "on" , the Twisty state is remembered the next time the page is shown. If "off" , the stored setting will be cleared.Note: when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
start | "hide" or "show" | Initial state of the Twisty; this will override any setting stored in a cookie (see remember ). | optional, default no initial state |
firststart | "hide" or "show" | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see remember ). | optional, default no initial state |
noscript | "hide" | Make content hidden in case use does not have JavaScript on | optional, default content is shown with no JavaScript |
%TWISTYTOGGLE{id="demo" mode="div" remember="on"}%My content%ENDTWISTYTOGGLE%
%ENDTWISTYTOGGLE%
%ENDTWISTYTOGGLE%
Class name | Note |
---|---|
.twistyTrigger |
|
.twistyContent |
|
.twistyPlaceholder |
|
.twistyRememberSetting |
behavior class |
.twistyForgetSetting |
behavior class |
.twistyStartHide |
behavior class |
.twistyStartShow |
behavior class |
.twistyInited1 |
behavior class: state is set to shown |
.twistyInited0 |
behavior class: state is set to hidden |
Preference | Meaning | Default |
---|---|---|
TWISTYPLUGIN_TWISTYSHOWLINK |
For example: More... |
More... |
TWISTYPLUGIN_TWISTYHIDELINK |
For example: Close |
Close |
TWISTYPLUGIN_TWISTYMODE |
Either div or span |
span |
TWISTYPLUGIN_TWISTYREMEMBER |
Either on or off . If set to on all Twisty states will be stored in a FOSWIKIPREF cookie; if set to off the FOSWIKIPREF cookie will be cleared |
not specified |
TWISTYPLUGIN_TWISTYANIMATIONSPEED |
Speed of animation: 'fast', 'slow', or integer milliseconds | 0 (no animation) |
configure
, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.
Authors: | Foswiki:Main.RafaelAlvarez, Foswiki:Main.MichaelDaum, Foswiki:Main.ArthurClemens |
Copyright | Copyright (C) Rafael Alvarez; Michael Daum, Arthur Clemens |
License: | GPL |
Version: | 11359 (2011-04-10) |
Release: | 1.6.12 |
Change History: | |
10 Apr 2011 | 1.6.12 Foswikitask:Item10618: parenthesis (or other Regex characters) in topic name crashes Foswiki Foswikitask:Item10264: Change template-js-css logic from foswikiJs to foswikiNoJs Foswikitask:Item10506: Add noci to avoid checkin of files during installation. |
15 Dec 2010 | 1.6.11 Foswikitask:Item10161: improved compatibility with jquery-1.4.3/4 |
06 Nov 2010 | 1.6.10 Foswikitask:Item9963: Revert usage of $percent back to $percnt |
29 Oct 2010 | 1.6.9 Foswikitask:Item9918: fixed twisty animation on jquery-1.4.3 |
27 Oct 2010 | 1.6.8 Foswikitask:Item9904: fixed compatibility with IE |
24 Oct 2010 | 1.6.7 Foswikitask:Item9815: Changed random IDs back to predictable IDs if remember option is set |
11 Sep 2010 | 1.6.6 Foswikitask:Item9499: Recoded show/hide animation code for smooth twisties. |
10 Sep 2010 | 1.6.5 Foswikitask:Item9515: Simplified code that shows/hides twisties. |
05 Sep 2010 | 1.6.4 Foswikitask:Item9626: Put link class around link and image. |
24 Aug 2010 | 1.6.3 Foswikitask:Item8573: Fix new dependency on JQueryPlugin |
25 Aug 2010 | 1.6.2 Foswikitask:Item9515: Fix compatibility with browsers running without js (content should always be shown) |
20 Aug 2010 | 1.6.1 Foswikitask:Item9499: Added preference variable to set show/hide transition animation speed (default to none) |
15 Aug 2010 | 1.6.0 Foswikitask:Item9422: Implement as JQueryPlugin::Plugin; emit display: none style on hidden twisties to avoid relying on CSS/JSFoswikitask:Item9415: Documentation changes |
27 Jul 2010 | 1.5.6 Foswiki:Tasks.Item9387: Fixed jQuery JS |
13 Mar 2010 | 1.5.5 Fixed id generated in subwebs. |
12 Feb 2010 | 1.5.4 Fixed jquery twisties, improved templates structure |
02 Sep 2009 | 1.5.3 Add sequential number to the TWISTY id to allow more than one instance with that id on the page. |
26 Aug 2009 | 1.5.2 Fix dependencies - jqueryPlugin and DojoToolkit were ported to foswiki a while ago. |
03 Dec 2008 | 1.5.1 Added parameter linkclass . Foswiki version. |
27 Nov 2008 | 1.5 Foswiki release; added option to use other Javascript libraries. |
08 Oct 2008 | 1.4.11, 1.4.12 It is now possible to have a twisty on the same line without a linebreak. |
03 Aug 2008 | 1.4.10 TWiki 4.2.1 release version. |
13 Dec 2007 | 1.4.9 fix to the loading order of javascript files in head. |
24 Nov 2007 | 1.4.6 - 1.4.8 Arthur Clemens - Added format tokens. |
07 Oct 2007 | 1.4.5 Arthur Clemens - Fix html tag with show/hide controls. |
25 Sep 2007 | 1.4.4 Arthur Clemens - Fix rendering of headers when prefix is used. |
11 Jul 2007 | 1.4.3 Arthur Clemens - Fix invalid html when prefix and suffix is used. |
23 Jun 2007 | 1.4.2 Arthur Clemens - Fixed bugs with parameters firststart and noscript (since version 1.4). |
20 Jun 2007 | 1.4 Arthur Clemens - Updated to work without ugly inserted javascript 'init' calls. This will change nothing to the functionality, but it will produce cleaner HTML, while at the same time the twisty is still set immediately (not at page onload) and graceful fallback in case of no javascript is maintained. |
19 Jun 2006 | 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files. |
25 Oct 2006 | 1.2 New variables to set default values: TWISTYSHOWLINK , TWISTYHIDELINK , TWISTYMODE , TWISTYREMEMBER ; property id is no longer required as this is automatically set (still recommended in some cases with remember="on" ); property value remember="off" will clear a previously stored cookie; new properties prefix and suffix ; JavaScript to collapse or expand all Twisties on the page. |
27 Sep 2006 | 1.101 Fixes JavaScript handling when AllowInlineScript in configure is not set |
11 Jun 2006 | 1.100 Added parameters start , firststart , noscript and class ; complete JavaScript rewrite for speed |
12 Sep 2005 | 1.000 First Version |
Dependencies: | None |
Home: | http://foswiki.org/Extensions/TwistyPlugin |
Support: | http://foswiki.org/Support/TwistyPlugin |