data/TWiki/TwistyPlugin.txt
author Colas Nahaboo <colas@nahaboo.net>
Sat, 26 Jan 2008 15:50:53 +0100
changeset 0 414e01d06fd5
child 1 e2915a7cbdfa
permissions -rw-r--r--
RELEASE 4.2.0 freetown
     1 %META:TOPICINFO{author="BaseUserMapping_333" date="1195487956" format="1.1" version="2"}%
     2 ---+!! <nop>%TOPIC%
     3 
     4 *A "twisty" is an interface toggle control to show and hide content.*
     5 
     6 !TwistyPlugin gives you several options to control the appearance of a twisty:
     7    * use link text or buttons
     8    * position an icon left or right
     9    * remember the state at the next visit of the page
    10    * start the Twisty open or closed
    11    * start the Twisty open or closed for the first visit
    12    * use a span or div for the content
    13    * set a class for the content span or div
    14 
    15 Twisty has a fallback mechanism in case !JavaScript is not available: all content is displayed and the control buttons are hidden.
    16 
    17 %TOC{title="On this page:"}%
    18 
    19 ---++ Usage examples
    20 ---+++ Triad
    21 A Twisty consists of 3 elements:
    22    1 Show button
    23    1 Hide button
    24    1 Collapsing content ('Toggle')
    25    
    26 The typical !TwistyPlugin triad will look like this (pseudo code):
    27 
    28 <verbatim>
    29 %TWISTYSHOW{}% %TWISTYHIDE{}%
    30 (there may be other things between buttons and content)
    31 %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE%
    32 </verbatim>
    33 
    34 ---+++ Shorthand
    35 
    36 The Twisty triad is conveniently packed into shorthand =%<nop>TWISTY{some parameters}% Collapsing content %<nop>ENDTWISTY%=:
    37 
    38 <verbatim>
    39 %TWISTY{}%
    40 my twisty content
    41 %ENDTWISTY%
    42 </verbatim>
    43 
    44 Will generate:
    45 
    46 %TWISTY{}%
    47 %GREEN% my twisty content %ENDCOLOR%
    48 %ENDTWISTY%
    49 
    50 You may have noticed that no parameters are passed to =%<nop>TWISTY{}%= but the show and hide links _do_ have text! The default values are fetched from plugin settings =TWISTYSHOWLINK= and =TWISTYHIDELINK=, see [[#PluginSettings][Plugin Settings]] below.
    51 
    52 
    53 ---+++ Twisty with icons
    54 We will use =mode="div"= to put the collapsing content below the button (the default mode is ="span"=).
    55 
    56 <verbatim>
    57 %TWISTY{
    58 mode="div"
    59 showlink="Show..."
    60 hidelink="Hide"
    61 showimgleft="%ICONURLPATH{toggleopen-small}%"
    62 hideimgleft="%ICONURLPATH{toggleclose-small}%"
    63 }%
    64 my twisty content
    65 %ENDTWISTY%
    66 </verbatim>
    67 
    68 It will look like this:
    69 
    70 %TWISTY{
    71 mode="div"
    72 showlink="Show..."
    73 hidelink="Hide"
    74 showimgleft="%ICONURLPATH{toggleopen-small}%"
    75 hideimgleft="%ICONURLPATH{toggleclose-small}%"
    76 }%
    77 %GREEN% my twisty content %ENDCOLOR%
    78 %ENDTWISTY%
    79 
    80 To put icons at the right side, write
    81 <verbatim>
    82 %TWISTY{
    83 mode="div"
    84 showlink="Show&nbsp;"
    85 hidelink="Hide&nbsp;"
    86 showimgright="%ICONURLPATH{toggleopen-small}%"
    87 hideimgright="%ICONURLPATH{toggleclose-small}%"
    88 }%
    89 my twisty content
    90 %ENDTWISTY%
    91 </verbatim>
    92 
    93 %TWISTY{
    94 mode="div"
    95 showlink="Show&nbsp;"
    96 hidelink="Hide&nbsp;"
    97 showimgright="%ICONURLPATH{toggleopen-small}%"
    98 hideimgright="%ICONURLPATH{toggleclose-small}%"
    99 }%
   100 %GREEN% my twisty content %ENDCOLOR%
   101 %ENDTWISTY%
   102 
   103 
   104 
   105 ---+++ Make it remember
   106 To store the last state in a TWIKIPREF cookie, add the parameter =remember="on"=.%BR%
   107 To test this, reload the page after toggling.
   108 
   109 <verbatim>
   110 %TWISTY{
   111 showlink="Show..."
   112 hidelink="Hide"
   113 remember="on"
   114 }%
   115 my twisty content
   116 %ENDTWISTY%
   117 </verbatim>
   118 
   119 %TWISTY{
   120 showlink="Show..."
   121 hidelink="Hide"
   122 remember="on"
   123 }%
   124 %GREEN% my twisty content %ENDCOLOR%
   125 %ENDTWISTY%
   126 
   127 If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using =remember="off"=:
   128 
   129 <verbatim>
   130 %TWISTY{
   131 showlink="Show..."
   132 hidelink="Hide"
   133 remember="off"
   134 }%
   135 my twisty content
   136 %ENDTWISTY%
   137 </verbatim>
   138 
   139 %TWISTY{
   140 showlink="Show..."
   141 hidelink="Hide"
   142 remember="off"
   143 }%
   144 %GREEN% my twisty content %ENDCOLOR%
   145 %ENDTWISTY%
   146 
   147 *NOTE:* Twisty ids are generated automatically. If you need control over exactly _which_ Twisty should be remembered, add the parameter =id=:
   148 
   149 <verbatim>
   150 %TWISTY{
   151 id="currentCustomerList"
   152 showlink="Show..."
   153 hidelink="Hide"
   154 remember="on"
   155 }%
   156 my customer list
   157 %ENDTWISTY%
   158 </verbatim>
   159 
   160 Note that =id= sets a sitewide cookie. To create a unique id, add topic or web variables:
   161 <verbatim>
   162 id="%WEB%_%TOPIC%_currentCustomerList"
   163 </verbatim>
   164 
   165 
   166 
   167 ---+++ Make it obey
   168 To let the Twisty start with its content folded open, add parameter =start="show"=. 
   169 
   170 <verbatim>
   171 %TWISTY{
   172 showlink="Show..."
   173 hidelink="Hide"
   174 start="show"
   175 }%
   176 my twisty content
   177 %ENDTWISTY%
   178 </verbatim>
   179 
   180 %TWISTY{
   181 showlink="Show..."
   182 hidelink="Hide"
   183 start="show"
   184 }%
   185 %GREEN% my twisty content %ENDCOLOR%
   186 %ENDTWISTY%
   187 
   188 Likewise use =start="hide"= to start with hidden content.
   189 
   190 <verbatim>
   191 %TWISTY{
   192 showlink="Show..."
   193 hidelink="Hide
   194 start="hide"
   195 }%
   196 my twisty content
   197 %ENDTWISTY%
   198 </verbatim>
   199 
   200 %TWISTY{
   201 showlink="Show..."
   202 hidelink="Hide
   203 start="hide"
   204 }%
   205 %GREEN% my twisty content %ENDCOLOR%
   206 %ENDTWISTY%
   207 
   208 
   209 
   210 ---+++ Make it obey only the first time
   211 To let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameter =firststart="show"=.
   212 If =remember="on"= is used, subsequential visits to the page will display the Twisty according the cookie setting.
   213 
   214 <verbatim>
   215 %TWISTY{
   216 showlink="Show..."
   217 hidelink="Hide"
   218 firststart="show"
   219 }%
   220 my twisty content
   221 %ENDTWISTY%
   222 </verbatim>
   223 
   224 %TWISTY{
   225 showlink="Show..."
   226 hidelink="Hide"
   227 firststart="show"
   228 }%
   229 %GREEN% my twisty content %ENDCOLOR%
   230 %ENDTWISTY%
   231 
   232 
   233 ---+++ Other use: hide interface parts in case of no !JavaScript
   234 
   235 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.
   236 
   237 Put the "JavaScript content" in an almost bare bones Twisty. Write =showlink="" hidelink=""= to not display any default link texts.
   238 
   239 <verbatim>
   240 %TWISTY{
   241 link=""
   242 noscript="hide"
   243 start="show"
   244 }%
   245 <input type="submit" class="twikiButton" value="You surely have !JavaScript" />
   246 %ENDTWISTY%
   247 </verbatim>
   248 
   249 %TWISTY{
   250 link=""
   251 noscript="hide"
   252 start="show"
   253 }%
   254 <input type="submit" class="twikiButton" value="You surely have !JavaScript" />
   255 %ENDTWISTY%
   256 
   257 Do not forget to set =start="show"= to show the Twisty content at all. 
   258 
   259 When !JavaScript is off, the button should be invisible.
   260 
   261 This code will show the button when !JavaScript is off:
   262 
   263 <verbatim>
   264 %TWISTY{
   265 link=""
   266 start="show"
   267 }%
   268 <input type="submit" class="twikiButton" value="You might have !JavaScript" />
   269 %ENDTWISTY%
   270 </verbatim>
   271 
   272 %TWISTY{
   273 link=""
   274 start="show"
   275 }%
   276 <input type="submit" class="twikiButton" value="You might have !JavaScript" />
   277 %ENDTWISTY%
   278 
   279 
   280 
   281 ---+++ Styling the Twisty
   282 Use parameter =class= to style the content div or class:
   283 
   284 <verbatim>
   285 %TWISTY{
   286 mode="div"
   287 showlink="Show..."
   288 hidelink="Hide"
   289 class="twikiHelp"
   290 }%
   291 my twisty content
   292 %ENDTWISTY%
   293 </verbatim>
   294 
   295 Generates: %BR%
   296 %TWISTY{
   297 mode="div"
   298 showlink="Show..."
   299 hidelink="Hide"
   300 class="twikiHelp"
   301 }%
   302 %GREEN% my twisty content %ENDCOLOR%
   303 %ENDTWISTY%
   304 
   305 
   306 ---+++ Twisty headers
   307 To be able to use header tags like =&lt;h2>=, use the properties =prefix= and =suffix=. Because we have identical show and hide links we can use the shorthand property =link=.
   308 
   309 <verbatim>
   310 %TWISTY{
   311 prefix="<h4>!!"
   312 mode="div"
   313 link="Header"
   314 showimgleft="%ICONURLPATH{toggleopen}%"
   315 hideimgleft="%ICONURLPATH{toggleclose}%"
   316 suffix="</h4>"
   317 }%
   318 my twisty content
   319 %ENDTWISTY%
   320 </verbatim>
   321 
   322 Add the =!!= to prevent the twisty header appear in the table of contents when you use =%<nop>TOC%=.
   323 
   324 Will create:
   325 
   326 %TWISTY{
   327 prefix="<h4>!!"
   328 link="Header"
   329 showimgleft="%ICONURLPATH{toggleopen}%"
   330 hideimgleft="%ICONURLPATH{toggleclose}%"
   331 suffix="</h4>"
   332 }%
   333 %GREEN% my twisty content %ENDCOLOR%
   334 %ENDTWISTY%
   335 
   336 ---+++ All on, all off
   337 
   338 You can toggle all Twisties on or off at once by putting a link or button on the page with class =twistyExpandAll= or =twistyCollapseAll=.
   339 
   340 <verbatim>
   341 <button class="twistyExpandAll twikiButton">Expand all</button> &nbsp; <button class="twistyCollapseAll twikiButton">Collapse all</button>
   342 </verbatim>
   343 
   344 Creates these controls:
   345 
   346 <button class="twistyExpandAll twikiButton">Expand all</button> &nbsp; 
   347 <button class="twistyCollapseAll twikiButton">Collapse all</button>
   348 
   349 When you want to use links, write:
   350 
   351 <verbatim>
   352 #VarTOGGLE
   353 
   354 <a href="#TOGGLE" class="twistyExpandAll">Expand all</a> &nbsp; 
   355 <a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>
   356 </verbatim>
   357 
   358 
   359 #VarTOGGLE
   360 
   361 <a href="#TOGGLE" class="twistyExpandAll">Expand all</a> &nbsp; 
   362 <a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>
   363 
   364 
   365 ---++ Special syntax: format tokens
   366 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.
   367 
   368 The format tokens are the same as with %TWIKIWEB%.FormattedSearch:
   369 
   370 | *Escape:* | *Expands To:* |
   371 | =$n= or =$n()= | New line. Use =$n()= if followed by alphanumeric character, e.g. write =Foo$n()Bar= instead of =Foo$nBar= |
   372 | =$nop= or =$nop()= | Is a "no operation". |
   373 | =$quot= | Double quote (="=) |
   374 | =$percnt= | Percent sign (=%=) |
   375 | =$dollar= | Dollar sign (=$=) |
   376 
   377 
   378 For example, to show an icon inside the link, do not write:
   379 <verbatim>
   380 link="%Y%"
   381 </verbatim>
   382 
   383 but use format tokens:
   384 
   385 <verbatim>
   386 link="$percntY$percnt"
   387 </verbatim>
   388 
   389 ... to get:
   390 
   391 %TWISTY{
   392 mode="div"
   393 link="$percntY$percnt"
   394 showimgleft="%ICONURLPATH{toggleopen-small}%"
   395 hideimgleft="%ICONURLPATH{toggleclose-small}%"
   396 }%
   397 my twisty content
   398 %ENDTWISTY%
   399 
   400 Or a more complex example using %TWIKIWEB%.SpreadsheetPlugin; do not write:
   401 
   402 <verbatim>
   403 link="Count: (%CALC{"$GET(infoCount)"}%)"
   404 </verbatim>
   405 
   406 but use format tokens:
   407 
   408 <verbatim>
   409 link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)"
   410 </verbatim>
   411 
   412 
   413 ---++ Syntax
   414 
   415 #VarTWISTY
   416 ---+++ TWISTY
   417 This renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag. %BR%
   418 Usage: =%<nop>TWISTY{ ... }% Toggable contents %<nop>ENDTWISTY%=
   419 
   420     | *Parameter*    | *Value* | *Description* | *Remark* |
   421     | =id=           | Unique identifier | Used to link [[#VarTWISTYBUTTON][TWISTYBUTTON]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]] | optional  |
   422     | =link=         | Link label | Link label for both show and hide links  | optional |
   423     | =hidelink=     | Link label | Hide link label  | optional |
   424     | =showlink=     | Link label | Show link label  | optional |
   425     | =mode=         | ="div"= or ="span"= | Specify if the Twisty Toggle section will use a =&lt;div&gt;= or a =&lt;span&gt;= tag.  | optional, defaults to =&lt;span&gt;= |
   426 	| =showimgleft=  | Image url | Specify the url of an image that will be displayed with the show link at the left side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
   427 	| =hideimgleft=  | Image url | Specify the url of an image that will be displayed with the hide link at the left side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
   428 	| =showimgright= | Image url | Specify the url of an image that will be displayed with the show link at the right side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
   429 	| =hideimgright= | Image url | Specify the url of an image that will be displayed with the hide link at the right side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
   430     | =remember=     | ="on"=, ="off"= | If ="on"=, the Twisty state is remembered the next time the page is shown. If ="off"=, the stored setting will be cleared.<br /> *Note:* when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
   431     | =start=        | ="hide"= or ="show"= | Initial state of the Twisty; this will override any setting stored in a cookie (see =remember=).  | optional, default no initial state |
   432     | =firststart=   | ="hide"= or ="show"= | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see =remember=).  | optional, default no initial state |
   433     | =noscript=     | ="hide"= | Make content hidden in case use does not have !JavaScript on | optional, default content is shown in case !JavaScript if off |
   434     | =class=        | CSS class name | Class for Twisty div or span | optional, default none |
   435     | =prefix=       | Text      | Text to display before the show/hide links | optional, default none |
   436     | =suffix=       | Text      | Text to display after the show/hide links | optional, default none |
   437     | =img=          | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
   438     | =imgleft=      | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
   439     | =imgright=     | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
   440     | =hideimg=      | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
   441     | =showimg=      | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
   442    * Related [[#VarTWISTYSHOW][TWISTYBUTTON]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]]
   443 
   444 #VarENDTWISTY
   445 ---+++ ENDTWISTY
   446 *Twisty closure, complements the opening TWISTY tag.*
   447    * Syntax: =%<nop>ENDTWISTY%=
   448 
   449 See [[#VarENDTWISTYTOGGLE][ENDTWISTYTOGGLE]].
   450 
   451 ---++ Twisty components syntax
   452 
   453 <div style="background-color:#eee; padding:.5em; margin:-.5em;">
   454 
   455 Ocassionally you might need to create a custom set of individual Twisty components:
   456 
   457 #VarTWISTYBUTTON
   458 ---+++ TWISTYBUTTON
   459 *Shorthand version for TWISTYSHOW &amp; TWISTYHIDE*
   460 This is useful if both the show and the hide button take the same arguments.
   461    * Supported parameters: all parameters supported by [[#VarTWISTYSHOW][TWISTY]], except for =noscript= and =class= (only used for 'toggle' content)
   462    * Parameter differences:
   463       * =mode=: button mode defaults to span
   464    * Syntax: =%<nop>TWISTYBUTTON{id="myid" ... }%=
   465    * Supported parameters:
   466     | *Parameter* | *Value* | *Description* | *Remark* |
   467     | =mode= | ="div"= or ="span"= | Specify if the *Twisty button* will use a =&lt;div&gt;= or a =&lt;span&gt;= tag  | optional, defaults to =&lt;span&gt;= |
   468    * Related: [[#VarTWISTYSHOW][TWISTYSHOW]] and [[#VarTWISTYHIDE][TWISTYHIDE]]
   469 
   470 #VarTWISTYSHOW
   471 ---+++ TWISTYSHOW
   472 *Show/open link*
   473    * Syntax: =%<nop>TWISTYSHOW{id="myid" ... }%=
   474    * Supported parameters:
   475     | *Parameter* | *Value* | *Description* | *Remark* |
   476     | =id= | Unique identifier | Used to link [[#VarTWISTYSHOW][TWISTYSHOW]], [[#VarTWISTYHIDE ][TWISTYHIDE ]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]] | required  |
   477     | =link= | Link label | Show link label  | optional |
   478     | =mode= | ="div"= or ="span"= | Specify if the Twisty Show link will use a =&lt;div&gt;= or a =&lt;span&gt;= tag  | optional, defaults to =&lt;span&gt;= |
   479     | =img= | Image url | Specify the url of an image that will be displayed at the *right side* of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
   480     | =imgleft=| Image url | Specify the url of an image that will be displayed at the left side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
   481     | =imgright= | Image url | Specify the url of an image that will be displayed at the right side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
   482     | =remember= | ="on"=, ="off"= | If ="on"=, the Twisty state is remembered the next time the page is shown. If ="off"=, the stored setting will be cleared.<br /> *Note:* when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
   483     | =start= | ="hide"= or ="show"= | Initial state of the Twisty; this will override any setting stored in a cookie (see =remember=).  | optional, default no initial state |
   484     | =firststart= | ="hide"= or ="show"= | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see =remember=).  | optional, default no initial state |
   485    * Example: =%<nop>TWISTYSHOW{id="demo" link=" Click to Unfold " imgleft="%<nop>ICONURLPATH{toggleopen}%"}%=
   486    * Related: [[#VarTWISTYHIDE][TWISTYHIDE]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]]
   487 
   488 #VarTWISTYHIDE
   489 ---+++ TWISTYHIDE
   490 *Hide/close link*
   491    * Syntax: =%<nop>TWISTYHIDE{id="myid" ... }%=
   492    * Supported parameters:
   493     | *Parameter* | *Value* | *Description* | *Remark* |
   494     | =id= | Unique identifier | Used to link [[#VarTWISTYSHOW][TWISTYSHOW]], [[#VarTWISTYHIDE ][TWISTYHIDE ]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]] | required  |
   495     | =link= | Link label | Hide link label | optional |
   496     | =mode= | ="div"= or ="span"= | Specify if the Twisty Hide link will use a =&lt;div&gt;= or a =&lt;span&gt;= tag  | optional, defaults to =&lt;span&gt;= |
   497     | =img= | Image url | Specify the url of an image that will be displayed at the *right side* of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
   498     | =remember= | ="on"=, ="off"= | If ="on"=, the Twisty state is remembered the next time the page is shown. If ="off"=, the stored setting will be cleared.<br /> *Note:* when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
   499     | =start= | ="hide"= or ="show"= | Initial state of the Twisty; this will override any setting stored in a cookie (see =remember=).  | optional, default no initial state |
   500     | =firststart= | ="hide"= or ="show"= | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see =remember=).  | optional, default no initial state |
   501    * Example: =%<nop>TWISTYHIDE{id="demo" link=" Click to Fold " imgleft="%<nop>ICONURLPATH{toggleclose}%"}%=
   502    * Related: [[#VarTWISTYSHOW][TWISTYSHOW]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]]
   503 
   504 #VarTWISTYTOGGLE
   505 ---+++ TWISTYTOGGLE
   506 *Twisty Toggle contents section*
   507    * Syntax: =%<nop>TWISTYTOGGLE{id="myid"}%=
   508    * Supported parameters:
   509     | *Parameter* | *Value* | *Description* | *Remark* |
   510     | =id= | Unique identifier | Used to link [[#VarTWISTYSHOW][TWISTYSHOW]], [[#VarTWISTYHIDE ][TWISTYHIDE ]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]].  | required  |
   511     | =mode= | ="div"= or ="span"= | Specify if the Twisty Toggle section will use a =&lt;div&gt;= or a =&lt;span&gt;= tag.  | optional, defaults to =&lt;span&gt;= |
   512     | =class= | CSS class name | Class for content div or span | optional, default none |
   513     | =remember= | ="on"=, ="off"= | If ="on"=, the Twisty state is remembered the next time the page is shown. If ="off"=, the stored setting will be cleared.<br /> *Note:* when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
   514     | =start= | ="hide"= or ="show"= | Initial state of the Twisty; this will override any setting stored in a cookie (see =remember=).  | optional, default no initial state |
   515     | =firststart= | ="hide"= or ="show"= | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see =remember=).  | optional, default no initial state |
   516     | =noscript= | ="hide"= | Make content hidden in case use does not have !JavaScript on | optional, default content is shown with no !JavaScript |
   517    * Example: =%<nop>TWISTYTOGGLE{id="demo" mode="div" remember="on"}%My content%<nop>ENDTWISTYTOGGLE%=
   518    * Related: [[#VarTWISTYHIDE][TWISTYHIDE]], [[#VarTWISTYHIDE][TWISTYHIDE]] an [[#VarENDTWISTYTOGGLE][ENDTWISTYTOGGLE]]
   519 
   520 #VarENDTWISTYTOGGLE
   521 ---+++ ENDTWISTYTOGGLE
   522 *The Twisty closure*
   523    * Syntax: =%<nop>ENDTWISTYTOGGLE%=
   524       * Will end the most inner unclosed Twisty Toggle section, using the proper tag
   525    * Example: =%<nop>ENDTWISTYTOGGLE%=
   526    * Related: [[#VarTWISTYTOGGLE][TWISTYTOGGLE]]
   527 </div>
   528 
   529 ---++ The Fine Print
   530 
   531 !TwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib.
   532 
   533 Major features are:
   534    * When active, the Twisty !JavaScript library is included in every topic
   535    * Provides a convenience syntax to define Twisty areas
   536    * Automatically generates ids
   537    * Automatically fills in default values
   538    * Global preference settings can be set in this topic or locally in individual topics
   539 
   540 #PluginSettings
   541 ---++ Plugin Settings
   542 
   543 Plugin settings are stored as preferences variables. To reference
   544 a plugin setting write ==%<nop>&lt;plugin&gt;_&lt;setting&gt;%==, i.e. ==%<nop>TWISTYPLUGIN_SHORTDESCRIPTION%==
   545 
   546    * Set TWISTYSHOWLINK = %MAKETEXT{"More..."}%
   547       * For example: =More...=
   548    * Set TWISTYHIDELINK = %MAKETEXT{"Close"}%
   549       * For example: =Close=
   550    * Set TWISTYMODE = 
   551       * Either =div= or =span=; =span= if nothing set
   552    * Set TWISTYREMEMBER = 
   553       * Either =on= or =off=; default is not specified. If set to =on= all Twisty states will be stored in a TWIKIPREF cookie; if set to =off= the TWIKIPREF cookie will be cleared
   554 
   555    * Set SHORTDESCRIPTION = Twisty section !JavaScript library to open/close content dynamically
   556    * Set DEBUG = 0
   557    
   558 ---++ Plugin Installation Instructions
   559    * Download the ZIP file from the Plugin web (see below)
   560    * Unzip ==%TOPIC%.zip== in your root ($TWIKI_ROOT) directory. Content:
   561    | *File:* | *Description:* |
   562    | ==TwistyBundleTWiki04x02_installer== |  |
   563    | ==TwistyBundleTWiki04x02_installer.pl== |  |
   564    | ==data/TWiki/TwistyBundleTWiki04x02.txt== |  |
   565    | ==data/TWiki/BehaviourContrib.txt== |  |
   566    | ==data/TWiki/TwistyContrib.txt== |  |
   567    | ==data/TWiki/TwistyPlugin.txt== |  |
   568    | ==lib/TWiki/Contrib/BehaviourContrib.pm== |  |
   569    | ==lib/TWiki/Contrib/TwistyBundleTWiki04x02.pm== |  |
   570    | ==lib/TWiki/Contrib/TwistyContrib.pm== |  |
   571    | ==lib/TWiki/Plugins/TwistyPlugin.pm== |  |
   572    | ==pub/TWiki/BehaviourContrib/behaviour.compressed.js== |  |
   573    | ==pub/TWiki/BehaviourContrib/behaviour.compressed_src.js== |  |
   574    | ==pub/TWiki/BehaviourContrib/behaviour.js== |  |
   575    | ==pub/TWiki/BehaviourContrib/behaviour_src.js== |  |
   576    | ==pub/TWiki/BehaviourContrib/cssQuery/cssQuery-p.js== |  |
   577    | ==pub/TWiki/BehaviourContrib/cssQuery/src/cssQuery-level2.js== |  |
   578    | ==pub/TWiki/BehaviourContrib/cssQuery/src/cssQuery-level3.js== |  |
   579    | ==pub/TWiki/BehaviourContrib/cssQuery/src/cssQuery-standard.js== |  |
   580    | ==pub/TWiki/BehaviourContrib/cssQuery/src/cssQuery.js== |  |
   581    | ==pub/TWiki/BehaviourContrib/cssQuery/src/test.html== |  |
   582    | ==pub/TWiki/BehaviourContrib/cssQuery/test.html== |  |
   583    | ==pub/TWiki/TwistyContrib/twist.compressed.js== |  |
   584    | ==pub/TWiki/TwistyContrib/twist.compressed_src.js== |  |
   585    | ==pub/TWiki/TwistyContrib/twist.css== |  |
   586    | ==pub/TWiki/TwistyContrib/twist.js== |  |
   587    | ==pub/TWiki/TwistyContrib/twist_src.js== |  |
   588 
   589    * Optionally, if it exists, run ==%TOPIC%_installer== to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
   590    * Alternatively, manually make sure the dependencies listed in the table below are resolved.
   591    None
   592    * Visit =configure= in your TWiki installation, and enable the plugin in the {Plugins} section.
   593 
   594 
   595 ---++ Plugin Info
   596 
   597 | Authors: | TWiki:Main.RafaelAlvarez, TWiki:Main.ArthurClemens |
   598 | Copyright &copy;: | 2005 Rafael Alvarez; 2006, 2007 Arthur Clemens |
   599 | License: | [[http://www.gnu.org/copyleft/gpl.html][GPL]] |
   600 | Dependencies: | None |
   601 | Plugin&nbsp;Version: | 24 Nov 2007 (version 1.4.8)  |
   602 | Change&nbsp;History: | <!-- versions below in reverse order -->&nbsp; |
   603 | 24 Nov 2007 | 1.4.6 - 1.4.8 Arthur Clemens - Added format tokens. |
   604 | 07 Oct 2007 | 1.4.5 Arthur Clemens - Fix html tag with show/hide controls. |
   605 | 25 Sep 2007 | 1.4.4 Arthur Clemens - Fix rendering of headers when =prefix= is used. |
   606 | 11 Jul 2007 | 1.4.3 Arthur Clemens - Fix invalid html when =prefix= and =suffix= is used. |
   607 | 23 Jun 2007 | 1.4.2 Arthur Clemens - Fixed bugs with parameters =firststart= and =noscript= (since version 1.4). |
   608 | 20 Jun 2007 | 1.4 Arthur Clemens - Updated to work without ugly inserted javascript 'init' calls. This will change nothing to the functionality, but it will produce cleaner HTML, while at the same time the twisty is still set immediately (not at page onload) and graceful fallback in case of no javascript is maintained. |
   609 | 19 Jun 2006 | 1.3 Arthur Clemens - Updated with TWiki 4 !JavaScript files. |
   610 | 25 Oct 2006 | 1.2 New variables to set default values: =TWISTYSHOWLINK=, =TWISTYHIDELINK=, =TWISTYMODE=, =TWISTYREMEMBER=; property =id= is no longer required as this is automatically set (still recommended in some cases with =remember="on"=); property value =remember="off"= will clear a previously stored cookie; new properties =prefix= and =suffix=; !JavaScript to collapse or expand all Twisties on the page.  |
   611 | 27 Sep 2006 | 1.101 Fixes !JavaScript handling when !AllowInlineScript in configure is not set |
   612 | 11 June 2006 | 1.100 Added parameters =start=, =firststart=, =noscript= and =class=; complete !JavaScript rewrite for speed |
   613 | 12 Sep 2005 | 1.000 First Version |
   614 | Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
   615 | Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
   616 | Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |