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.
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%.
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.