Edit: I’ve created an updated version of this library and described it at Even More Twisty HTML. I don’t recommend using the version described below because of the issues people have reported.
Twisties, otherwise known as “Disclosure Triangles” are little triangles (â–º) that twist (â–¼) when clicked to hide or show content on the page. I’m working on a web page that has a lot of content, but didn’t want it all displayed all the time.
I searched around for a little while trying to find a nice example written by someone else, but came up empty. Probably other people thought this was too simple, or my searching skills failed me. Either way, I ended up writing this myself.
So first I came up with some requirements for myself:
- It needed to be 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.
- It should be small, and run quickly.
- It should be easy for web developers to understand.
- 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.
- It should be extensible so others can do things with it I hadn’t imagined.
I have two results. One uses script.aculo.us to show smooth animations, and the other doesn’t. In both cases, the underlying code is the same. My twisty library checks to see if script.aculo.us is available. If it is, you’ll see animations. If it isn’t, you won’t.
So how do you use it?
First, you need to download twisty.js and the four twisty images: hidden, down, the hidden animation, and the down animation. Save them into the same directory as your web page.
Next, in your page header, include the following to load the javascript:
<script type="text/javascript" src="twisty.js"></script>
If you want animations, you need to download and include the script.aculo.us scripts too.
In your stylsheet, you should include:
.twisty:hover {
background-color: #f0f0f0;
border: 1px solid #e0e0e0;
margin-left: -1px;
}
.twisty {
cursor: hand;
cursor: pointer;
}
To make sure you get a nice mouse cursor over a twisty, and also the image highlights nicely when you hover over it.
Next, you need to initialize the twisties in your <body> tag. This is only needed if you want to support users not using Javascript and want to have blocks that are hidden by default.
<body onload="initTwisty();">
To create a twisty, you need to put the whole thing inside a <div>, Add a label, the image with a class of twisty, reference the correct twisty image (either twisty-down.gif or twisty-hidden.gif), and an onclick handler referencing a unique id. Then put a <div> with a class of collapsible and the id you chose before in the onclick handler. Inside that put another div. (This last div is needed by script.aculo.us for some reason.)
<div>Some Label <img class="twisty" src="twisty-down.gif" onclick="toggleTwisty('childid'); return false;">
<div class="collapsible" id="childid">
<div>Some content</div>
</div>
</div>
Let me know if you can think of anything to improve this widget, or it’s description.
Our Swat web app toolkit has a SwatDisclosure widget that provides this functionality. Our toolkit might be overkill for you, but the JS/HTML/CSS might be worth looking at for comparison: http://swat.silverorange.com/demo/index.php?demo=Disclosure
Ha. Steven beat me to it. I was going to recommend checking out the SwatDisclosure client-side stuff, too.
Hey Steven & Brad,
I really like the visual style you have for your disclosures. And your solution for displaying the page when javascript isn’t enabled is much much cleaner to the user. (My solution hides the content after the page loads; yours hides the content as soon as the block-to-be-hidden is finished loading.)
Both solutions use the same timing for the animation no matter how big the content is. This means that an expose that’s 10 pixels high will appear to animate MUCH slower than one 100 pixels high.
I like my animated triangles, but that might be a matter of taste.
Thanks for pointing out this great toolkit, and this widget in particular. Looks like a lot of great ideas.
I like your animated triangles too. Are the gifs you use looping with an extra long last frame or do they just play once and stop?
The triangles do have an extra long last frame. But they also only play once and stop. That’s actually just an artifact of some experiments I was doing at first. You’ll notice that the twistyToggle function I have actually walks the list of twisties and switches all the animated images it finds to the static versions before setting it’s own animated image. This is because the browser (firefox at least) will replay all the animations when a new copy of that image is to be displayed.
Drove me batty until I figured out what was happening. I’m working on a cleaned up version using some of the great ideas from Swat. Maybe I’ll fix that last frame too.
Hi Ben;
I’m not too sure how interested you are in Ie compatibility, but the no
The no slide page you link to doesn’t seem to work at all in my ie6.
All the extra bit show open when you load the page, and I’m getting javascript errors on character 4
line 58+96
with an error of “Object does not support this property or method”
I can send you some screen shots if you like.
The twisty.html version is working, although all the extra bits are visible on page load.
clicking on the twisties will remove and add them back in.
Hey Shen,
Oops. You’re right. I ignored IE since I don’t really have access to a Windows machine. I would love to be compatible, but it’ll be some time before I can test with a real IE install.
EDIT: Okay. I found the problem. I was setting CSS properties in a standards compliant way. I have code which fixes the problem. However, I’m also updating the visual style, so I’ll post both updates together. Thanks.
The hidden parts are briefly shown during load — I don’t know if you want to do something about that?
How do you toggle the disclosure triangle without using the mouse?
One way to handle this is to rewrite the page to make the disclosure label into a anchor, and put the show/hide handler on that anchor. That way you can tab to the disclosure triangle and toggle it with the keyboard. (This is what we did for Launchpad).
On line 56 (the inner for loop of initTwisty()), the condition should read as “j
Hi Ben,
Have you thought about adding an additional class to the Twisties via javascript, so that for anyone with JS disabled, the twisties wouldn’t show behaviour?
You could even add the twisties with JS.
kool thing !!!!!
Amazing !!! This is an excellent