A CSS only responsive content accordion

June 12th, 2014

I was working on a project recently and along with a bunch of other cool things, it required a content accordion. Specifically it needed to have 4 different boxes for content that started out as equal widths and when a user hovered over a given box it would expand that box while collapsing the others. Oh, it also had to be responsive. Make sense? Pretty standard stuff here.

My first thought was to search for a javascript plugin that was lightweight so I could get this functionality. Luckily, the set of terms I was searching for didn’t really produce what I was looking for. I decided to give it some thought on what needed to be done at a basic level, and then figured I might be able to put it together with mostly CSS and then write some javascript to handle some of the animations. As I started writing it I realized I wasn’t going to need any JS.

The Basic Idea

What we have here is really a main container to house everything, and then 4 separate div’s that hold the content for each box.

We start with each box set at width: 25%; so they evenly span the container and float all of them left. When a box is hovered we expand that out to width: 70%; while making all the other boxes width: 10%;.

To make it responsive I picked a breakpoint of 800px and then simply gave all of the boxes a width of 100%.

The Code

I have put everything in a pen so that you can see the result as well as all the code.

See the Pen CSS Only Responsive Content Accordion by RJ McCollam (@rjmccollam) on CodePen.

Since the container on this site is only 800px it is best to view the pen in it’s own tab so you don’t see the responsive style first.

You can see this in production here.