Twisty 3: Simple and lightweight Disclosure Triangles for the web

By | March 31, 2010
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. These were my requirements:
  • 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:

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>

4 thoughts on “Twisty 3: Simple and lightweight Disclosure Triangles for the web

  1. Paul Kastle

    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.

  2. Paul Kastle

    Changing the visibility to blank ‘ ‘ from ‘block’ in the js file allows it to work properly when collapsing tbody sections in Firefox. Neat stuff.

  3. Goerge

    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.

  4. admin Post author

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *