"Fold-All" Function on Codepen Not Working

#1

Hi folks!

On Codepen, there is a drop down menu in the top right corner of each coding section: html, css, and javascript. In that drop down is a “Fold All” button that is meant to condense all of your code for ease of organization.

However, I have found the function to only work intermittently for the html side, and never for the css panel. Anyone know what’s happening with that?

I have searched and searched, but it is extraordinarily difficult to search for anything about codepen’s functions, as every page that anyone has ever been made on codepen that mentions the search keywords pops up first on the search stack.

Help?
SevenRooT

#2

I’m not having any issues with it (on Chrome 87). Is it possible that you have mismatched braces or tags in your code? That would prevent it from working correctly.

2 Likes
#3

To add on to what @ArielLeslie has said, the only time I’ve had it not fold in HTML is when I didn’t have autosave enabled. After saving it then folds.
I’ve not had any folding issues with CSS or JS (as long as everything is matched correctly).

1 Like
#4

I have never used that feature. But I did notice that it seems to only work on your own pens (and forks) and not just any pen you are looking at.

1 Like
#5

Okay, so I validated my css, and there is a funny thing:

I am using a css property

text-decoration-thickness: 2px;

The W3 validator says that property does not exist, but the effect will not work without it.

How is that?

~SevenRoot

https://codepen.io/SevenRooT/full/NWrVoea

#6

Dunno.

You could have also specified the thickness on the same line. Id est;
text-decoration: underline wavy #bfe0e8 2px;
See MDN docs

But as you noted, W3C says it’s not a text-decoration value. I’ll let you dig into the specs to see if you can find anything.

But again, this does not address the “fold-all” issue you originally asked about. Something to take up with codepen.

1 Like
#7