TwistyPlugin<-- Contributions to this TWiki plugin are appreciated. Please update the plugin page at http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev. If you are a TWiki contributor please update the plugin in the SVN repository. --> IntroductionThe TwistyPlugin gives you several options to control the appearance of a twisty:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Attention: The default mode works for content that is a single paragraph. Use the div mode in all other cases:
%TWISTY{ mode="div" }% * Bullet %ENDTWISTY%Will generate: <--/twistyPlugin twikiMakeVisibleInline-->
<--/twistyPlugin--> Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide" start="hide" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: Hide interface if no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
<--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadSheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin Settings<--/twistyPlugin twikiMakeVisibleInline-->
Plugin settings are stored as preferences settings. Do not change the settings here, they are here only for illustration purposes showing the default values. Define the settings in Main.TWikiPreferences. For example, to customize the TWISTYREMEMBER setting, add a * Set TWISTYPLUGIN_TWISTYREMEMBER = ... bullet in Main.TWikiPreferences.
<--/twistyPlugin--> Plugin Installation InstructionsThis plugin is pre-installed. TWiki administrators can upgrade the plugin as needed on the TWiki server.<--/twistyPlugin twikiMakeVisibleInline-->
<--/twistyPlugin--> Plugin Info
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin twikiMakeVisibleInline--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->
|
TwistyPlugin<-- Contributions to this TWiki plugin are appreciated. Please update the plugin page at http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev. If you are a TWiki contributor please update the plugin in the SVN repository. --> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Twisty section JavaScript library to open/close content dynamically
IntroductionThe TwistyPlugin gives you several options to control the appearance of a twisty:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Attention: The default mode works for content that is a single paragraph. Use the div mode in all other cases:
%TWISTY{ mode="div" }% * Bullet %ENDTWISTY%Will generate: <--/twistyPlugin twikiMakeVisibleInline-->
<--/twistyPlugin--> Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide" start="hide" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: Hide interface if no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
<--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadSheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin Settings<--/twistyPlugin twikiMakeVisibleInline-->
Plugin settings are stored as preferences settings. Do not change the settings here, they are here only for illustration purposes showing the default values. Define the settings in Main.TWikiPreferences. For example, to customize the TWISTYREMEMBER setting, add a * Set TWISTYPLUGIN_TWISTYREMEMBER = ... bullet in Main.TWikiPreferences.
<--/twistyPlugin--> Plugin Installation InstructionsThis plugin is pre-installed. TWiki administrators can upgrade the plugin as needed on the TWiki server.<--/twistyPlugin twikiMakeVisibleInline-->
<--/twistyPlugin--> Plugin Info
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin twikiMakeVisibleInline--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->
|
TwistyPlugin<-- Contributions to this TWiki plugin are appreciated. Please update the plugin page at http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev. If you are a TWiki contributor please update the plugin in the SVN repository. --> IntroductionThe TwistyPlugin gives you several options to control the appearance of a twisty:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Attention: The default mode works for content that is a single paragraph. Use the div mode in all other cases: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ mode="div" }% * Bullet %ENDTWISTY%Will generate: <--/twistyPlugin twikiMakeVisibleInline-->
<--/twistyPlugin--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | mode="div" showlink="Show..." hidelink="Hide" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" showlink="Show..." hidelink="Hide" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->It will look like this: %TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | mode="div" showlink="Show..." hidelink="Hide" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" showlink="Show..." hidelink="Hide" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->To put icons at the right side, write %TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | mode="div" showlink="Show " hidelink="Hide " showimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" showlink="Show " hidelink="Hide " showimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | mode="div" showlink="Show " hidelink="Hide " showimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" showlink="Show " hidelink="Hide " showimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" remember="on" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" remember="on" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" remember="on" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" remember="on" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" remember="off" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" remember="off" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" remember="off" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" remember="off" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my customer list
</> <--/twistyPlugin-->Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" start="hide" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" start="hide" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" start="hide" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" start="hide" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="show" . If remember="on" is used, subsequential visits to the page will display the Twisty according the cookie setting.
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" firststart="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" firststart="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | showlink="Show..." hidelink="Hide" firststart="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" firststart="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin--> Other use: Hide interface if no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | link="" noscript="hide" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | link="" noscript="hide" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
</> <--/twistyPlugin-->%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | link="" noscript="hide" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | link="" noscript="hide" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
</> <--/twistyPlugin-->Do not forget to set 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{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | link="" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | link="" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
</> <--/twistyPlugin-->%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | link="" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | link="" start="show" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
</> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->Generates: %TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin--> Twisty headers | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | To be able to use header tags like <h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | To be able to use header tags like <h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | prefix="!!" mode="div" link="Header" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" suffix="" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | prefix="!!" mode="div" link="Header" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" suffix="" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
%TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | prefix="!!" mode="div" link="Header" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" suffix="" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | prefix="!!" mode="div" link="Header" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" suffix="" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: %TWISTY{ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | mode="div" link="$percntY$percnt" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" link="$percntY$percnt" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}%
my twisty content
</> <--/twistyPlugin-->Or a more complex example using SpreadSheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin Settings<--/twistyPlugin twikiMakeVisibleInline-->
Plugin settings are stored as preferences settings. Do not change the settings here, they are here only for illustration purposes showing the default values. Define the settings in Main.TWikiPreferences. For example, to customize the TWISTYREMEMBER setting, add a * Set TWISTYPLUGIN_TWISTYREMEMBER = ... bullet in Main.TWikiPreferences.
<--/twistyPlugin--> Plugin Installation InstructionsThis plugin is pre-installed. TWiki administrators can upgrade the plugin as needed on the TWiki server.<--/twistyPlugin twikiMakeVisibleInline-->
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> Plugin Info
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin twikiMakeVisibleInline--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->
|
TwistyPlugin<-- Contributions to this TWiki plugin are appreciated. Please update the plugin page at http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev. If you are a TWiki contributor please update the plugin in the SVN repository. --> IntroductionThe TwistyPlugin gives you several options to control the appearance of a twisty:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide" start="hide" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: Hide interface if no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
<--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadSheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin Settings | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Plugin settings are stored as preferences variables. To reference a plugin setting write %<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" showlink="Show details " hidelink="Hide details " }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Plugin settings are stored as preferences settings. Do not change the settings here, they are here only for illustration purposes showing the default values. Define the settings in Main.TWikiPreferences. For example, to customize the TWISTYREMEMBER setting, add a * Set TWISTYPLUGIN_TWISTYREMEMBER = ... bullet in Main.TWikiPreferences. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
</> <--/twistyPlugin--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Plugin Installation Instructions | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | This plugin is pre-installed. TWiki administrators can upgrade the plugin as needed on the TWiki server.
<--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | <--/twistyPlugin--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Plugin Info | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div"
showlink="Show Change History http://twiki.oats.inaf.it/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif"
hidelink="Hide Change History http://twiki.oats.inaf.it/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif"
}%
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | </> <--/twistyPlugin--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
TwistyPlugin<-- Contributions to this TWiki plugin are appreciated. Please update the plugin page at http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev. If you are a TWiki contributor please update the plugin in the SVN repository. --> IntroductionThe TwistyPlugin gives you several options to control the appearance of a twisty:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide" start="hide" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: Hide interface if no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
<--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadSheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin SettingsPlugin settings are stored as preferences variables. To reference a plugin setting write%<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION%
Plugin Installation Instructions
Plugin Info
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
TwistyPlugin<-- Contributions to this TWiki plugin are appreciated. Please update the plugin page at http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev. If you are a TWiki contributor please update the plugin in the SVN repository. --> IntroductionThe TwistyPlugin gives you several options to control the appearance of a twisty:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide" start="hide" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: Hide interface if no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
<--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadSheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin SettingsPlugin settings are stored as preferences variables. To reference a plugin setting write%<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION%
Plugin Installation Instructions
Plugin Info | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
TwistyPlugin<-- Contributions to this TWiki plugin are appreciated. Please update the plugin page at http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev. If you are a TWiki contributor please update the plugin in the SVN repository. --> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Twisty section JavaScript library to open/close content dynamically
IntroductionThe TwistyPlugin gives you several options to control the appearance of a twisty:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide" start="hide" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: Hide interface if no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
<--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadSheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin SettingsPlugin settings are stored as preferences variables. To reference a plugin setting write%<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION%
Plugin Installation Instructions
Plugin Info
|
TwistyPlugin | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | <-- Contributions to this TWiki plugin are appreciated. Please update the plugin page at http://twiki.org/cgi-bin/view/Plugins/TwistyPlugin or provide feedback at http://twiki.org/cgi-bin/view/Plugins/TwistyPluginDev. If you are a TWiki contributor please update the plugin in the SVN repository. -->Twisty section JavaScript library to open/close content dynamically | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | A "twisty" is an interface toggle control to show and hide content. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Introduction | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | TwistyPlugin gives you several options to control the appearance of a twisty: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | The TwistyPlugin gives you several options to control the appearance of a twisty: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Usage examples | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Triad | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
A Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Twisty with icons | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
We will use mode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Make it remember | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
To store the last state in a TWIKIPREF cookie, add the parameter remember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Make it obey | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
To let the Twisty start with its content folded open, add parameter start="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide" start="hide" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Make it obey only the first time | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | To let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameter firststart="show" .
If remember="on" is used, subsequential visits to the page will display the Twisty according the cookie setting. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | To let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameter 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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Other use: Hide interface if no JavaScript | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Other use: hide interface parts in case of no JavaScript | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
You can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons.
Put the "JavaScript content" in an almost bare bones Twisty. Write showlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Styling the Twisty | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Use parameter class to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Twisty headers | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
To be able to use header tags like <h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
<--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Expand all Collapse all | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Special syntax: format tokens | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
If you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | The format tokens are the same as with FormattedSearch: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | The format tokens are the same as with FormattedSearch: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
For example, to show an icon inside the link, do not write:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Or a more complex example using SpreadsheetPlugin; do not write: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Or a more complex example using SpreadSheetPlugin; do not write: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTY | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
This renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag. Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
ENDTWISTY | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Twisty closure, complements the opening TWISTY tag.
Twisty components syntax | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Shorthand version for TWISTYSHOW & TWISTYHIDE
This is useful if both the show and the hide button take the same arguments.
TWISTYSHOW | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Show/open link
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
TWISTYHIDE | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Hide/close link
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
TWISTYTOGGLE | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Twisty Toggle contents section
ENDTWISTYTOGGLE | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
The Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin Settings | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Plugin settings are stored as preferences variables. To reference | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Plugin settings are stored as preferences variables. To reference a plugin setting write %<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | a plugin setting write %<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Plugin Installation Instructions | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Plugin Info | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Related Topics: TwistyContrib, VarTWISTY, TWikiPlugins, DeveloperDocumentationCategory, AdminDocumentationCategory | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
TwistyPluginA "twisty" is an interface toggle control to show and hide content. TwistyPlugin gives you several options to control the appearance of a twisty:
On this page:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | hidelink="Hide | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
start="hide"
}%
my twisty content
</> <--/twistyPlugin-->%TWISTY{ showlink="Show..." | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | hidelink="Hide | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
start="hide"
}%
my twisty content
</> <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: hide interface parts in case of no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
%TWISTY{
prefix="!!" | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
link="Header"
showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif"
hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif"
suffix=""
}%
my twisty content
</> <--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadsheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TWISTYSHOWShow/open link
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TWISTYHIDEHide/close link
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TWISTYTOGGLETwisty Toggle contents section
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin SettingsPlugin settings are stored as preferences variables. To reference a plugin setting write%<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION%
Plugin Installation Instructions
Plugin Info
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
TwistyPluginA "twisty" is an interface toggle control to show and hide content. TwistyPlugin gives you several options to control the appearance of a twisty:
On this page:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% ShorthandThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{}% my twisty content %ENDTWISTY%Will generate: More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->You may have noticed that no parameters are passed to %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.
Twisty with iconsWe will usemode="div" to put the collapsing content below the button (the default mode is "span" ).
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{ mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%" }% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{ showlink="Show..." hidelink="Hide" remember="on" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{ showlink="Show..." hidelink="Hide" remember="off" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{ id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% my customer list %ENDTWISTY%Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{ showlink="Show..." hidelink="Hide" start="show" }% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{ showlink="Show..." hidelink="Hide start="hide" }% my twisty content %ENDTWISTY%Show... Hide start= <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: hide interface parts in case of no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{ link="" noscript="hide" start="show" }% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You might have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{ mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{ prefix="<h4>!!" mode="div" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>" }% my twisty content %ENDTWISTY%Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% .
Will create:
!! Header Header<--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadsheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin SettingsPlugin settings are stored as preferences variables. To reference a plugin setting write%<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION%
Plugin Installation Instructions
Plugin Info | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TwistyPluginA "twisty" is an interface toggle control to show and hide content. TwistyPlugin gives you several options to control the appearance of a twisty:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Twisty has a fallback mechanism in case JavaScript is not available: all content is displayed and the control buttons are hidden. Unless parameter noscript="hide" is used to specifically set the content to hide. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Twisty has a fallback mechanism in case JavaScript is not available: all content is displayed and the control buttons are hidden. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
What's new in version 1.2:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
On this page:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Shorthand | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
Working Twisty | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
The Twisty triad is conveniently packed into shorthand %TWISTY{some parameters}% Collapsing content %ENDTWISTY% : | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | More... Close <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | It will look like this: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Will generate: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | More... Close <--/twistyPlugin twikiMakeVisibleInline-->my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | You may have noticed that no parameters are passed to %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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Twisty with icons | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | We will use mode="div" to put the collapsing content below the button. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | We will use mode="div" to put the collapsing content below the button (the default mode is "span" ). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ mode="div" showlink="Show..." | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide" showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin-->It will look like this: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ mode="div" showlink="Show..." hidelink="Hide" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->To put icons at the right side, write | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ mode="div" showlink="Show " | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide " showimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ mode="div" showlink="Show " hidelink="Hide " | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen-small.gif" hideimgright="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose-small.gif" }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" remember="on" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ showlink="Show..." | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide" remember="on" }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" : | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" remember="off" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ showlink="Show..." | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide" remember="off" }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id : | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my customer list
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Note that id sets a sitewide cookie. To create a unique id, add topic or web variables:
id="%WEB%_%TOPIC%_currentCustomerList" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" . | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" start="show" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ showlink="Show..." | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide" start="show" }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->Likewise use start="hide" to start with hidden content. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide start="hide" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ showlink="Show..." | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide start="hide" }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="show" .
If remember="on" is used, subsequential visits to the page will display the Twisty according the cookie setting. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" firststart="show" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ showlink="Show..." | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hidelink="Hide" firststart="show" }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> Other use: hide interface parts in case of no JavaScript | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
You can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons.
Put the "JavaScript content" in an almost bare bones Twisty. Write showlink="" hidelink="" to not display any default link texts. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | link="" noscript="hide" start="show" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | link="" noscript="hide" start="show" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin-->Do not forget to set 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: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ link="" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | start="show" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ link="" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | start="show" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline--> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin-->Generates: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ mode="div" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | showlink="Show..." hidelink="Hide" class="twikiHelp" }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link . | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | %TWISTY{prefix="!!" link="Header" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | prefix="!!" mode="div" link="Header" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" suffix=""}% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | suffix="" }% | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
my twisty content
<--/twistyPlugin--> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Add the !! to prevent the twisty header appear in the table of contents when you use %TOC% . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Will create: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | %TWISTY{prefix="!!" link="Header" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | %TWISTY{ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | prefix="!!" link="Header" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
showimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" suffix=""}% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | hideimgleft="/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" suffix="" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | }% my twisty content | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll . | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Deleted: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Creates these controls: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
When you want to use links, write:
#VarTOGGLE | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Expand all | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Expand all | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Collapse all | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < | Expand all | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Expand all | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Collapse all | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | Special syntax: format tokensIf you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | The format tokens are the same as with FormattedSearch:
link="%Y%"but use format tokens: link="$percntY$percnt"... to get: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->Or a more complex example using SpreadsheetPlugin; do not write: link="Count: (%CALC{"$GET(infoCount)"}%)"but use format tokens: link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Plugin SettingsPlugin settings are stored as preferences variables. To reference a plugin setting write%<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION%
Plugin Installation Instructions
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > | None | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Plugin Info
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Changed: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
< < |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Added: | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> > |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
TwistyPluginA "twisty" is an interface toggle control to show and hide content. TwistyPlugin gives you several options to control the appearance of a twisty:
noscript="hide" is used to specifically set the content to hide.
What's new in version 1.2:
On this page:
Usage examplesTriadA Twisty consists of 3 elements:
%TWISTYSHOW{}% %TWISTYHIDE{}% (there may be other things between buttons and content) %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE% Working TwistyThe Twisty triad is conveniently packed into shorthand%TWISTY{some parameters}% Collapsing content %ENDTWISTY% :
%TWISTY{showlink="Show..." hidelink="Hide"}% my twisty content %ENDTWISTY%It will look like this: Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Twisty with iconsWe will usemode="div" to put the collapsing content below the button.
%TWISTY{mode="div" showlink="Show..." hidelink="Hide" showimgleft="%ICONURLPATH{toggleopen-small}%" hideimgleft="%ICONURLPATH{toggleclose-small}%"}% my twisty content %ENDTWISTY%It will look like this: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin-->To put icons at the right side, write %TWISTY{mode="div" showlink="Show " hidelink="Hide " showimgright="%ICONURLPATH{toggleopen-small}%" hideimgright="%ICONURLPATH{toggleclose-small}%"}% my twisty content %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Make it rememberTo store the last state in a TWIKIPREF cookie, add the parameterremember="on" .To test this, reload the page after toggling. %TWISTY{showlink="Show..." hidelink="Hide" remember="on"}% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using remember="off" :
%TWISTY{showlink="Show..." hidelink="Hide" remember="off"}% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->NOTE: Twisty ids are generated automatically. If you need control over exactly which Twisty should be remembered, add the parameter id :
%TWISTY{id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on"}% my customer list %ENDTWISTY% Make it obeyTo let the Twisty start with its content folded open, add parameterstart="show" .
%TWISTY{showlink="Show..." hidelink="Hide" start="show"}% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin-->Likewise use start="hide" to start with hidden content.
%TWISTY{showlink="Show..." hidelink="Hide" start="hide"}% my twisty content %ENDTWISTY%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Make it obey only the first timeTo let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameterfirststart="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%Show... Hide <--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> Other use: hide interface parts in case of no JavaScriptYou can use Twisty to show interface elements that should only be visible with JavaScript enabled. For instance the textbox control buttons in the edit screen need JavaScript to work. If a visitor does not have JavaScript on it would not make sense to show these buttons. Put the "JavaScript content" in an almost bare bones Twisty. Writeshowlink="" hidelink="" to not display any default link texts.
%TWISTY{link="" noscript="hide" start="show"}% <input type="submit" class="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin-->Do not forget to set 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="twikiButton" value="You surely have !JavaScript" /> %ENDTWISTY% <--/twistyPlugin twikiMakeVisibleInline--> <--/twistyPlugin--> Styling the TwistyUse parameterclass to style the content div or class:
%TWISTY{mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp"}% my twisty content %ENDTWISTY%Generates: <--/twistyPlugin twikiMakeVisibleInline-->
my twisty content
<--/twistyPlugin--> Twisty headersTo be able to use header tags like<h2> , use the properties prefix and suffix . Because we have identical show and hide links we can use the shorthand property link .
%TWISTY{prefix="<h4>!!" link="Header" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>"}% my twisty content %ENDTWISTY%Will create: !! Header Header<--/twistyPlugin twikiMakeVisibleInline-->my twisty content <--/twistyPlugin--> All on, all offYou can toggle all Twisties on or off at once by putting a link or button on the page with classtwistyExpandAll or twistyCollapseAll .
<button class="twistyExpandAll twikiButton">Expand all</button> <button class="twistyCollapseAll twikiButton">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 SyntaxTWISTYThis renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.Usage: %TWISTY{ ... }% Toggable contents %ENDTWISTY%
ENDTWISTYTwisty closure, complements the opening TWISTY tag.
Twisty components syntax
Ocassionally you might need to create a custom set of individual Twisty components:
TWISTYBUTTONShorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.
TWISTYSHOWShow/open link
TWISTYHIDEHide/close link
TWISTYTOGGLETwisty Toggle contents section
ENDTWISTYTOGGLEThe Twisty closure
The Fine PrintTwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib. Major features are:
Plugin SettingsPlugin settings are stored as preferences variables. To reference a plugin setting write%<plugin>_<setting>% , i.e. %TWISTYPLUGIN_SHORTDESCRIPTION%
Plugin Installation Instructions
Plugin Info
|