Hide details 
<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span> <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span> <span id="demo1toggle" class="twistyContent twistyMakeHidden"> my twisty content </span>Generates: my twisty content
<span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span> <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span> <span id="demo2toggle" class="twistyContent twistyMakeHidden"> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>Generates: Expand... Hamlet is without question the most famous play in the English language... Collapse... Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. Skins can customize the color of the twisty placeholder by modifiying the
.twistyPlaceholder style.
. Examples require SpreadSheetPlugin to work (installed by default).
Some of my TWiki users are impressed by the optical effect of what can be done with TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copy&pasting sometimes fails in embarrassing ways if non-unique id attributes are present in a topic. Maybe it is easy for a power user, but it surely isn't easy enough. There ought to be a way to make it easier.
Well, here you are.
Just set a couple of site preferences, and your users will immediately understand your examples and start writing their own twisties. And what's more: They'll do so in a consistent way, across all your topics in all webs.
* Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
<a href="#">more...</a>
</span>
<span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
<a href="#">close</a>
</span>
<div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
* Set FLOP = </div>
You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
* *Brace and parenthesize in K&R style*
%FLIP%
When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ...
%FLOP%
* *Separate your control keywords from the following opening bracket*
%FLIP%
Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
%FLOP%
twistyExpandAll 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
<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>
| Authors: | JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler |
||||||
| Copyright: | © 2005 Sam Hasler and Rafael Alvarez © 2006-2007 Arthur Clemens © 2008-2013 Peter Thoeny © 2005-2013 TWiki:TWiki.TWikiContributor |
||||||
| License: | GPL  |
||||||
| Dependencies: |
|
||||||
| Version: | 2013-02-16 |
| 2013-02-16: | TWikibug:Item7123: Use TWISTY in installation instructions and change history |
| 2011-07-10: | TWikibug:Item6725: Change global package variables from "use vars" to "our" |
| 2010-05-15: | TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB |
| 20 Jun 2007 | 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls. |
| 18 Jun 2007 | 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files. |
| 25 Oct 2006 | 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2 |
| 26 Sep 2006 | 1.010 Arthur Clemens - Complete JavaScript rewrite |
| 12 Sep 2005 | 1.000 Initial version |
| Home: | http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib |
| Feedback: | http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev |
| Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal |
| I | Attachment | Action | Size | Date | Who | Comment |
|---|---|---|---|---|---|---|
 css |
twist.css | manage | 0.1 K | 2005-09-11 - 16:27 | TWikiContributor | Style Sheet |
 js |
twist.js | manage | 3.4 K | 2005-09-11 - 16:26 | TWikiContributor | JavaScript library |
|
Copyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Daya Bay? Send feedback Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TwistyContrib. |
