Sometimes, there’s a lot happening on a page, and you want to make it easy on your users by keeping their experience simple. Let’s say you have a page with 12 different sections of content, each has its own header. If all of that content is initially visible, that’s a lot of scrolling and reading. But if it’s just the headers, the overall contents become immediately scannable and the user can drill more directly — this is the advantage of keeping content in drawers. It’s also a good idea to have the first drawer open, to make the experience obvious and intuitive to the user.

First things first tho, let’s look at a starter example in JQuery:

See the Pen by Dan Cruzat (@DanCruzat) on CodePen.

This is total blue-box mac and cheese with JQuery and HTML, but just like the namesake it gets the fast job done without too much fuss. It can sit on top of existing styles no problem, we have trig and tuck classes for controller purposes only. If there is no JQuery in the DOM, it just defaults with all visible content open. Not the worst thing in the world, but it is considered “ugly” compared to more modern methods.

These days, the preference is to control visibility via CSS, and use JQuery or JavaScript to assign an active class for vis on user click. Here’s an example following the same logic as the first, but this time all we’re doing is adding or removing a class.

See the Pen by Dan Cruzat (@DanCruzat) on CodePen.

Big pluses:

– This is a fully responsive solution, and these interfaces are sooo satisfying to use on phones
– Opening one drawer will automatically close another
– Action only if a header’s drawer is closed, nada for click on header of open drawer
– Drawers can have a lot of information or a little

Sometimes blue-box is all you need! JQuery drawers FTW.