- Cross-platform: It should work on my cell phone, on IE6, and real web browsers
- Robust: If things go wrong, it shouldn’t break. If the user doesn’t have JavaScript enabled, it should work. No CSS? It should still work. A user script which hides or shows nodes out from under us? It should still work
- Understandable: It should be easy for web developers to understand and add to their existing pages
- Small: If this adds lots of code to a web site, it won’t be used and will slow downloads down
- Attractive: It should “feel” nice. Lots of feedback to the user, and maybe some animation if appropriate. It shouldn’t seem different from twisties the user has seen before
- Accessible: Should work with the keyboard and with the mouse; printed pages should do the right thing
First, a demo:
Click this title to hide and show a portion of the page 
Don’t open me!
Hey! I told you not to open this section!
| Name | My numbers | My letters |
|---|---|---|
| Beth | 65, 5, 1, 6 | y |
| Andy | 21, 12 | k,f,s |
| Fred | 9 | k |
| Mary | 100,000 | r, w, e |
To get started, you can simply download the code:
- UNIX/Linux: twisty3.tar.gz – 30K
- Windows: twisty3.zip – 36K
- CVS/SVN: Not yet available
Set Up
If you want the smooth animation, seen above, put the following into your <head>:
<script type="text/javascript" src="twisty3/twisty.js"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects" type="text/javascript"></script>
<link rel="stylesheet" href="twisty.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="twisty-print.css" type="text/css" media="print"></link>
If you want a smaller footprint, or don’t like the exposure animation, put the following into your <head> tag instead:
<script type="text/javascript" src="twisty3/twisty.js"></script>
<link rel="stylesheet" href="twisty.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="twisty-print.css" type="text/css" media="print"></link>
Defining a section to be hidden
Each section needs a unique id, a title, and the content of the section to be hidden. Then, format that section like this:
<div class="collapsible">
<a href="javascript:toggleTwisty('uniqueid');">
The Section Title
<img class="twisty" src="twisty-down.gif">
</a>
<div id="uniqueid">
<div>
Section Content
</div>
</div>
</div>Hiding sections by default
If you want a section to be hidden by default, add after the section’s <div>:
<script type="text/javascript">
hideTwisty('uniqueid');
<script>
Paul Kastle | 04-May-10 at 6:22 pm | Permalink
Thanks, this is great and very useful. I have rows in a table that I need to collapse, and this works for it if it acts on tbody sections, but to make the image twist properly I have to break it into seperate tables, one for each section. I have found an issue in Firefox though, upon un collapsing a section it looses all table formatting. It works fine in IE though. I’ll post if I figure it out.
Paul Kastle | 05-May-10 at 2:22 pm | Permalink
Changing the visibility to blank ‘ ‘ from ‘block’ in the js file allows it to work properly when collapsing tbody sections in Firefox. Neat stuff.