A responsive 'accordian to tabs' pattern

Back in August I was working for a client who 'got me on board' to deal with a variety of things one of which being the creation of some code that would turn a list of content from an accordian to some tab-ed content.

Along with a little help from stack overflow I managed to squeeze the workings out of jQuery and CSS so that dependant on viewport size the user would see an accordian of content or a tab navigation-ed content.

It worked great.

Some months later that man from Pittsburgh the webhead Brad Frost created This Is Responsive a site on github containing links to resources, news and patterns around the ever growing subject of web design. I was going through this list to find that he'd included 'accordian to tab' as a pattern that hadn't been created yet.

I thought it'd be great to give something back to 'the community' rather than holding something like this to close to my chest. So over the last week I got to working on tidying up the code I created. I cleaned out the Samuel L. Jackson offensive quotes and replaced it with lorem ipsum and took the styling to something as simple as possible.

This is the result.

This is great for people to work from as a starting point, but there a few things that I'd like to eventually change. I'd love to get rid of dependancy on jQuery to get the show/hide to work so that it would hopefully run a little smoother on mobile as the processor won't have to work on the JavaScript framework as well. To that end I'd love to add animations to it via CSS3 rather than jQuery or JavaScript so that it's more 'progressively enhanced'. I'd also like to check the accessibility of it fully to make sure it works as well as it possibly can for as many circumstances that it could be found in.

I hope you like it, I hope you use it, I wish you'd break it and fix it too.