Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
You’ll notice a new little icon in the editor headers now:
They are essentially checkboxes which you can click to collapse an editor. Click again to show it. Now you can view one editor with loads of space (as you always have been able to) or you can collapse just one editor and view just two editors with more space.
This is particularly useful when working on a Pen that just doesn’t need one of the languages very much. Here’s some screenshots to show different collapses states:
Default Editor State (all three on)
JS Editor Collapsed (HTML & CSS only)
HTML & CSS Collapsed (JS Only)
That area used to have a “expansion” icon, which when clicked, would overtake the other two editors giving you full width (or height, depending on the editor layout) editing.
We heard from a lot of users that they wish they could turn off editors. Sometimes we’d mention the expanding functionality, and if they didn’t know about it, would like it, but still come back and tell us they wish they could turn editors off.
Here’s a recent one from John Lueders:
We hesitated for one big reason: I couldn’t think of a good way to handle it, UI wise. Of course there are a ton of ways to do it. Perhaps a new dropdown in the header that handled that job. I figured it had to be somewhere outside of the editors themselves since, if you turn one “off”, you’ll need to still have access to somewhere to turn it back “on”. I’m really wary about adding new UI unless it’s very obviously vital. Especially in the editor which is perhaps our most cramped and important screen.
I think John’s email triggered it for me. “Minimize” doesn’t need to mean “totally hidden”. We could “collapse” the editor instead, leaving enough of it still showing to expose UI to turn it back on. That essentially reverses the current functionality, but all the same things are still possible (and easy to do) so we can just replace the “expanders” with “collapsers”.
I thought about using a native checkbox, but that seemed like it might stick out visually in an awkward way. We use icon fonts anyway, so tossing in a new “checkbox” style icon was easy. Finding one I liked wasn’t even though there are so so many.
I ended up just putting one together in Illustrator.
Other than the default state, there are six possible states now to the editor. One for each of the editors maximized, and one for each of the editors minimized. We made a URL param that would open the page in that state, just in case you want to share or bookmark a Pen that way. You’ll see the simple pattern we used. Left to right (or top to bottom), 1 = on, 0 = off.
HTML On / CSS On / JS Off = http://codepen.io/pen/?editors=110
HTML On / CSS Off / JS Off = http://codepen.io/pen/?editors=100
HTML On / CSS Off / JS On = http://codepen.io/pen/?editors=101
HTML Off / CSS On / JS Off = http://codepen.io/pen/?editors=010
HTML Off / CSS Off / JS On = http://codepen.io/pen/?editors=001
HTML Off / CSS On / JS On = http://codepen.io/pen/?editors=011
The screenshots in this post where from the horizontal layout, but you know we have vertical layouts now too, and all this collapsing business works for them as well.
Notice any quirks, let us know.