After using the Filament Group’s excellent collapsible script at work, I decided to make a couple of minor improvements to it. You can read more about it on their site, but in short it does a great job of providing an easy and accessible way to collapse sections of content.
I simply added a couple of tweaks. First, the ability to expand and collapse the content by using the right and left arrow keys, respectively, when focused on the trigger element. Previously you could only do this by using the enter key (which is equivalent to a click). Second, the ability to start the element collapsed instead of expanded. You can do this by passing the value “true” to the function when initiating the collapsible section:
$('h2').collapsible(true);
You can find my changed version for download here.
Like this:
Tags: accessibility, accordion, collapsible, javascript
