Most FAQ pages don't need a plugin with a dozen configuration options, easing curves, callback hooks, theming support, they need a heading that expands when clicked. We got tired of loading a 20kb accordion library for that, especially once we started counting up how many separate plugin scripts a typical client site had accumulated over a year of "just add this one thing."
The core behavior is genuinely small:
- Bind a click handler to the question elements.
- slideToggle() the answer that follows.
- Add an .active class for the arrow icon flip, driven entirely by CSS rather than more JavaScript.
That's genuinely most of it, maybe fifteen lines including a bit of housekeeping to close other open items when a new one is opened, which is the one behavior detail that took a little more thought than the rest.
Why we bothered
It's tempting to reach for a well-tested plugin instead of writing this ourselves, and for something more complex than an accordion we usually would. But every extra script tag is another HTTP request, another thing that can conflict with another plugin's jQuery version assumptions, and another thing to debug when something breaks two years from now and nobody remembers which of six accordion plugins is actually in use on that particular page.
We also found that most accordion plugins assume a specific markup structure, and retrofitting a client's existing HTML to match it took longer in a couple of cases than just writing the fifteen lines against whatever markup was already there.
Where we keep it
We keep this snippet in a shared gists folder now and paste it into new builds instead of adding another script tag to the page. It's small enough that copying and lightly adapting it per project is faster than pulling in a dependency and reading its documentation to figure out which three of its thirty options we actually need.
For anything with genuinely complex requirements, nested accordions, keyboard accessibility beyond basic tab order, animated height calculations that need to handle dynamically changing content, we'd reach for a real plugin without hesitation. This is specifically for the extremely common "client wants an FAQ page" case, which is most of what we build, and for that case fifteen lines of plain jQuery has been enough for over a year now without a single complaint.
We did test it across the browsers our clients' visitors were actually using, including the inevitable slice still on older versions of Internet Explorer, and slideToggle()'s built-in handling meant we didn't need any extra branching to get consistent behavior. That's one advantage of leaning on jQuery's own animation methods instead of hand-rolling something lower level for this, since we wouldn't trust a newer CSS-only approach for something as visible as an FAQ page just yet, given how inconsistently the browsers we still need to support handle it.