I recently needed to create an accordion. The easiest solution is to use the accordion() function built-into the jQuery UI library. So I did that. And then I noticed that the UI library is 120KB! Even if you create a custom build with only the required components you end up with an 18KB library. 18KB just to toggle some divs open and closed. Unacceptable.
I’m always leery of over-engineering. With broadband everywhere web designers “these days” (wow I sound old) are sometimes guilty of script-itis… adding dozens of scripts and polyfills and resets and what-have-you without any thought to payload or performance. Why? Why wouldn’t you want your site to be as fast as possible, especially on mobile (you are practicing RWD aren’t you?).
Enough with the ranting right? Right. So here’s a simple accordion script I wrote that has no add-on requirements beyond the main jQuery library. It’s just a few lines of code. In fact, it’s 266 bytes instead of 18,000 bytes. It’s ridiculously bare-bones but it does 100% of what I (and probably most people) need. The code should be fairly self-explanatory. The only usage note I would make is that you can use the “default” CSS class to have one of your panels open on page load.
Enjoy!
Accordion 1
Cras malesuada ultrices augue molestie risus.
Accordion 2
Lorem ipsum dolor sit amet mauris eu turpis.
Accordion 3
Vivamus facilisisnibh scelerisque laoreet.