{ 2007 02 27 }

Twisty HTML

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.

Posted by xkahn on Tuesday, February 27th, 2007, at 5:09 pm, and filed under html.

Follow any responses to this entry with the RSS 2.0 feed.

You can post a comment, or trackback from your site.