Adobe Robohelp

Get new posts delivered straight to your inbox.

Subscriber count: 3,505

Stitcher radio

follow us in feedly

Want more tech comm blogs to follow? See my Tech Comm Collection of Blogs on Feedly.

Adobe Robohelp

Sample Expand and Collapse Code with Twisting Buttons

Mar 31, 2013 • findability

In my previous post, I wrote about how handy collapsing and expanding sections can be. Although there are several plugins that enable this functionality, it's pretty easy to create this functionality yourself from scratch.

JSfiddle.net is a neat site that lets you play around with JavaScript, separating out the HTML, CSS, JavaScript, and result into their own quadrant on the page. I created a "fiddle" showing the HTML, CSS, and JavaScript necessary for the simplest example of a collapsing and expanding section. You can see the end result below or here on its own page. You can also view each section in its own quadrant here. Or embedded here:

Since I plan to work a lot more with JavaScript, I'll probably create a lot more of these fiddles in weeks to come. As a development tool, the fiddle site is neat because it lets you easily adjust styles, HTML, and JavaScript while you're on the same page. It also creates a revision history.

Feel free to use this script or fork it into something better. I added a comment above each line to indicate what's going on. I know there are a lot of similar scripts out there, but many of them are overly complicated. Others don't have the visual expanding or collapsing icons. As far as I can tell, this script is as simple as it can be (just remove the commented lines to shorten it), and it functions the same.

I know there was some discussion about the effectiveness of collapsing sections. In some instances, there are pretty persuasive use cases. For example, if you have an API with various methods that you can run on an object, and you want to list all methods on the same page, collapsing sections will make it easy for users to scan and find the method they're looking for.

follow us in feedly


Get new posts delivered straight to your inbox.

Subscriber count: 3,505

Powered by ZipRecruiter

About Tom Johnson

Tom Johnson

I'm a technical writer based in the California San Francisco Bay area. Topics I write about on this blog include technical writing, authoring and publishing tools, API documentation, tech comm trends, visual communication, technical writing career advice, information architecture and findability, developer documentation, and more. If you're a professional or aspiring technical writer, be sure to subscribe to email updates using the form above. You can learn more about me here.