Can we have collapsible code blocks?

Question

I would like to see collapsible code blocks in questions and answers. This would be useful because sometimes the amount of code posted in a question or answer becomes so large (and necessary) that being able to easily hide it when you no longer need to look at it would be nice.

This may also address the issue about dealing with reviewing code in an iterative style. By that, I mean that old version of the code can stay in the question, but be defaulted to collapsed, while the new code can be more prominent.

Also, depending on the question revision history probably won't be ideal in most cases, as the old code is still relevant to the question and previous answers.

Example of a non-collapsed block:

class Main{                                                               [hide]
    public static void main(String[] a){
       new Foo().hello();
    }
}

class Foo{
    public void hello(){
        System.out.println("Hello World");
    }
}

Example of a collapsed block:

class Main{ ...                                                           [show]

Answer 1

I wouldn't mind some sort of auto-collapse/expand for code areas beyond five or so lines. Perhaps even just a clickable "[more]" control at line 5 or 10. But on the other hand, it takes away from being able to scroll down a code snippet to an area of interest, then scroll down the page to another area of interest - sort of like keeping your thumb on a reference page while you scan the book, if you will. I don't think it's that big a deal for myself to lose the scroll bar though.

Re: RobertPitt - features to allow the user to customize a post layout to help clean it up and add to presentation are always nice, especially when the post gets to be way too long or disorganized. I would love to see SE macros to help with post content presentation. But, it would mean SE would veer towards a wiki interface, where users would have to learn a load of proprietary markup well beyond just simple HTML tags and the quick code style backticks. I can only imagine how SE devs would feel about maintaining support for that feature.

As I said elsewhere though, I think this whole problem might be solved by having a second page or tab attached to the question where the poster can dump a load of code, complete with the typical diff and edit-accept features already apart of SE. Not too useful for SE domains like health/fitness and camping, so probably a CR or SO-only feature.

Answer 2

I can only see a couple of pros and cons to this:

Pros:

• Reduce question size, this causes users to not be as daunted by questions with lots of code blocks.
• Allows reviews to read only the question description, this is good when users split their code up and describe each aspect.

Cons:

• It's more a gimmick than a solid feature.
• Stack Exchange would have to develop this.

I have to admit, I have thought a button to hide/minimize all code blocks from a question could be quite nice. But all that would happen is I'd flip-flop between the code being open and closed. The biggest benefit would be from questions that describe code and then give an example straight away, as then you can read the description as if it were one paragraph. But rather than resolving this with the ability to minimize code blocks, we should change the question to be better formatted. And on answers, this isn't really a problem as we're not a free hinter.

And so I honestly don't think the benefits are that great.

Also the cons aren't that big a deal. You can write a user-script or a plugin that changes the CSS client side. This means that Stack Exchange wouldn't have to develop it and support it. And means we can have the bells and whistles.

And so no, I don't think Stack Exchange should develop it. But we're all programmers, so any-one of us could develop something simple. Take for example:

(function(minimize) {
    size = function (b) {
        return b ? '1em' : '100%';
    }
    var pres = $('pre');
    for(var i=0, pre; i < pres.length; i++) {
        pre = pres[i];
        pre.showhide = minimize;
        $(pre).css('height', size(minimize));
        $(pre).click(function() {
            this.showhide = !this.showhide;
            $(this).css('height', size(this.showhide));
        });
    }
})(true);