- 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>
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.
Changing the visibility to blank ‘ ‘ from ‘block’ in the js file allows it to work properly when collapsing tbody sections in Firefox. Neat stuff.
Had a real problem with integrating this with our site . The CSS screwed with the rest of our sites css. Eventually dropped it. Functions great on it’s own.
Goerge: So twisty uses two CSS class names: collapsible and twisty
It’s possible that other sites use these class names already. It should be pretty easy to edit the class names in the twisty CSS file. If you change the name of the “twisty” class, you need to change the Javascript as well.
However, it’s MORE likely that the scriptaculous.js file was causing conflicts.