Sample Expand and Collapse Code with Twisting Buttons
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.
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.
I'd Rather Be Writing Newsletter
Get new posts delivered straight to your inbox.
About Tom Johnson
I'm a technical writer based in the California San Francisco Bay area. In this blog, I write about topics related to technical communication — Swagger, agile, trends, learning, plain language, quick reference guides, tech comm careers, academics, and more. I'm interested in , API documentation, visual communication, information architecture and findability, and more. If you're a technical writer of any kind (progressional, transitioning, student), be sure to subscribe to email updates using the form above. You can learn more about me here. You can also contact me with questions.