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.

Tiny little addition to how the collapsing/expanding editors work. An overwhelming majority of users prefer the new collapsing editors, but also a number of users reported that they actually found them slower or harder to use. In order to help out the the users who preferred the “expanding” behavior, but without changing the current functionality, we added the ability to double-click the checkbox to expand the editor. Single clicking still collapses.


This functionality is slightly tricky, because of the very fact that both single-click and double-click events need to both work and be mutually exclusive (a double-click doesn’t do the single click action also). We use this same functionally elsewhere as well. For instance, in the comment threads on the Details View, you can click the username in the header of a comment to go to that user’s page, or you can double-click it to inject that username into a comment reply.

To make it easier to handle this mutually exclusive event binding, our own Alex Vazquez wrote up a tiny jQuery plugin. He published it for all here:

See the Pen Jquery Extension to Handle Clicks and Double Clicks by Alex Vazquez (@quezo) on CodePen