Please add the ability to fold blocks of code in questions and answers

Question

It would be great to have the option to fold code snippets, entire questions and answer posts on a user basis and allow defining some generic foldable regions within the question/answer editor.

Non generic folding info could be stored in cookies perhaps to move the storage/processing requirement to the client side.

Definable folding can take any free and safe HTML tag or other multi character trick (<>Fold this<>)

Answer 1

Yes, I like this idea a lot. Every so often I post an answer where the main bit is actually quite small, but a footnote has a lot of code baggage - it would be great if that baggage could be folded up to keep it in proportion with respect to the rest of the post.

Answer 2

This feature request (and it being declined) is almost 6 years old. I'd appreciate if this could be reconsidered. There are a lot of use cases that have been mentioned but I don't even think this should be focused on code blocks. Since code blocks get a scrollbar anyway you can already fill your 30k character limit with a single code block, without taking up a lot of vertical space. So putting in massive amounts of code isn't really discouraged by the system to begin with.

However, I think collapsible regions would be much more useful for normal explanations. In many cases there is the simple answer which will serve most people's needs, and then there's also the in-depth "if you really want to know the details" explanation. In those cases, I would prefer not to take up so much screen real estate for the people who are not interested in the full explanation, but I'd also prefer not to link to the gritty details externally.

You might say "a good answer is tailored to its audience, just pick the short or the long version appropriately" - but I'm not writing the answer only for the OP but also for future visitors, so catering to both cases would certainly improve the usefulness of the answer.

I also don't understand why some people are so strongly opposed to this: collapsible regions are already a thing on SE. On one hand, Stack Snippets can be hidden, but more importantly spoilers are implemented on mobile as collapsible regions. If they're such a bad thing, why have them on one platform in the first place? Couldn't we just turn spoilers into collapsible regions everywhere? (Although a comment-based syntax like Stack Snippets would be more convenient than prepending >! to every single line.)

Answer 3

I like the idea, especially because it would make it easier to make a question 'multi lingual' where you could post a question or answer with multiple code samples in multiple languages without making it a nightmare to read.

Answer 4

The <details> tag does exactly this

One main criticism for this feature request was that a new syntax had to be defined. This is provided by the HTML5 standard with the <details> and <summary> tags. Example

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

Shows Some details with an arrow to click to show more. Folded vs unfolded:

@Jeff said that he wants to avoid too much code. That is already enforced by the hard limit, and people who know about HTML-styling Stackexchange are not very likely to post unnecessary code.

Answer 5

This is a hugely helpful idea for the [R] tag and I suspect any other statistics/data-heavy tags as well.

We strongly recommend our users include sample data:

How to make a great R reproducible example?

Often due to the nature of the statistical beast even carefully culled sample data is unwieldy. For instance this well-conceived post:

Dealing with Messy Dates

There's simply no way to include the variety of examples the questioner was interested in without a huge code dump. I tend to put mine at the end, but it's still a sub-optimal solution that makes answering harder and the site less beautiful.

Answer 6

Personally, I like the idea. I've been guilty of long-freakin'-code-posting myself. However, I somehow doubt Jeff would agree. :)

Answer 7

You mean a collapsed code-snippet like this?

alert('Most folded code ever!');

Answer 8

This would be very nice - especially if it's closed (or showing only the first line of code) by default.

Answer 9

I like the idea of automagically inserting folding on (at least) code. It would help with the newbies who dump their entire architecture into a question -- which I still prefer over those who provide no code at all. Anything over, say, 10 lines? What's the cutoff for when it adds a scroll bar? Because that's probably about the time we should definitely have a fold.

Answer 10

Here is my solution to this problem - a greasemonkey script which will hide all but the first line of each code block until it is clicked on (click again to re-fold the block). It is a bit hackish atm, but it does work on my computer. If you find any bugs in it, let me know and I will try to fix them.

EDIT: Added menu commands to show and hide all foldable blocks.

// ==UserScript==
// @name           Code folding
// @namespace      http://stackoverflow.com/
// @include        http://stackoverflow.com/questions/*
// @include        http://meta.stackexchange.com/questions/*
// ==/UserScript==

//default values

// Add a selector for each element that you wish to fold
// to the array below (one array item per selector
var elementsToFold = new Array("pre:has(code)");

// Close elements by default?
var closeByDefault = true;

//-------------------------------
//- Do not edit below this line -
//-------------------------------
function getJQuery() {
    if (typeof unsafeWindow.jQuery == 'undefined') {
        window.setTimeOut( getJQuery, 100 );
    }
    else {
        $ = unsafeWindow.jQuery; letsGo();
    }
}
//add the folded style into the document
var style = window.document.createElement("style");
style.type = "text/css";
style.innerHTML = ".folded {height:1.0em; overflow:hidden;cursor:N-resize;}";
document.getElementsByTagName("HEAD")[0].appendChild(style);

getJQuery();

function letsGo () {
    $(elementsToFold.join(",")).click( function() {
            $(this).toggleClass("folded");
            });
    window.showHideElements = function (event) {
        alert(event.innerHTML);
    }
    window.hideAllElements = function () {
        $(elementsToFold.join(",")).each(function() {
                $(this).addClass("folded");
                });
    }
    window.showAllElements = function () {
        $(elementsToFold.join(",")).each(function() {
                $(this).removeClass("folded");
                });
    }

    if (closeByDefault) {
        $(elementsToFold.join(",")).each(function() {
                $(this).addClass("folded");
                });
    }

    GM_registerMenuCommand("Show all folded blocks", showAllElements);
    GM_registerMenuCommand("Hide all foldable blocks", hideAllElements);
}

Answer 11

I’d like to provide (but one) example of a valid reason for providing collapsible elements: log files. Sometimes you must provide logs for analysis, and often they tend to be lengthy and cannot be pared down without losing potentially valuable information. Yet, there is no reason to have them be full-length by default. For example, someone may be able to diagnose an issue without even looking at it while someone may need some clue from the log to figure out the problem.

Answer 12

It would also be useful to support collapsed sections of text or images. Example usages:

• On one of the mathematical Stack Exchange sites, I might write an answer which contains a long but relatively uninteresting proof of one of the claims. Since the proof is needed for completeness but may be a detour from the main point, I want it to be collapsed until an interested user clicks.
• For a question on a graphical computer program, I might include a screenshot illustrating what I want to do. I might have some additional screenshots illustrating more examples; these would probably only be interesting to someone that is trying to answer my question.
• Details on multiple options. For example, a User Experience question might ask:

Which position for some control would allow the fastest navigation by users?

• Controls on the left
  (Collapsed: UI mockup with controls on the left)
• Controls on top
  (Collapsed: UI mockup with controls on top)
• Controls on bottom
  (Collapsed: UI mockup with controls on bottom)

Answer 13

They could rig up something like this, they already use these interface elements elsewhere in the site:

So of course, hitting the arrow would bring up the full code block. I'd actually do it somewhat differently in order to not lose width on the code block, but something along these lines would be helpful.

Answer 14

How about now?

With the advent of live examples, it would be nice to also keep the code onsite on the off-chance the live example site goes offline or loses the contents, but also nice to keep the code collapsed (as it's already readily available, and live examples tend to accommodate more code).

Pretty please?

Answer 15

This is a good idea, especially for code. I sometimes find myself putting a sizable piece of sample code into an answer, which some people may just not want to read through. It would be nice if I could fold it for people to skip over if they like.

Incidentally, this would also help with "code golf" or challenge questions where solutions or hints included with the question could be folded so that people don't have to see them if they don't yet want to.

Answer 16

Great idea. I'd suggest supporting it for quote blocks as well.

Answer 17

I'd like to see the code block small at first, with an option to expand beyond the bounds of the question (to solve the not-too-uncommon problem of horizontal scrolling).

Answer 18

I'd like to bring this topic back again, because I really feel the need for a collapsible area. In some cases (I'm primarily working with R) I need to give some more input for others to be able to help me/solve the problem. Like multiple files of codes. It would be really nice to have them each in a collapsible area so others can easily focus on checking one file after the other. This can be a huge improvement in the readability of a question or answer.

Answer 19

I think one of the real issues here is a lack of control over how the feature could be used. Users unfamiliar with SE could do all sorts of thing with a feature like this, potentially creating time consuming issues for users that are moderating.

In addition to that, it is well known that Google prefers that you hide as little content as possible. It would be necessary to inform users of this SEO practice, before one could reasonably ask them to use it correctly.

I personally like the idea, but there are significant practical issues worth considering.

Answer 20

For HTML/ CSS/ JS/ Any JS Libraries (React, Vue ...)

1 Select Javascript/ HTML/ CSS snippet.

2 Enter the Code.

3 Make sure Show console is unchecked if the code is not runnable.

4 Choose Hide Snippet by Default

5 Make other configurations as needed.

6 Save & Insert into post.

Ex:

// Add your code here
const message = "Hi there";

Add a note mentioning that the below code is not runnable if it is not and point to platforms where the code can be executed if applicable. Check this answer for reference.

Answer 21

Line numbers and code folding don't belong here, because you shouldn't be posting huge swaths of code anyway. If it's more than a few snippets, the question and/or the answers are busted.

If you "need" to link to a lot of code, host it elsewhere, and give us the relevant snippet with a link to the rest.

Any features that encourage posting a lot of code are also broken by design and will be declined for the same reason -- why would we want to encourage behaviors that lead to unreadable posts?