CodeMirror: Range Collapsing Demo

(function() {
  CodeMirror.defineOption("collapseRange", false, function(cm, val, old) {
    var wasOn = old && old != CodeMirror.Init;
    if (val && !wasOn)
      enableRangeCollapsing(cm);
    else if (!val && wasOn)
      disableRangeCollapsing(cm);
  });

var gutterClass = "CodeMirror-collapserange";

function enableRangeCollapsing(cm) {
    cm.on("gutterClick", gutterClick);
    cm.setOption("gutters", (cm.getOption("gutters") || []).concat([gutterClass]));
  }

function disableRangeCollapsing(cm) {
    cm.rangeCollapseStart = null;
    cm.off("gutterClick", gutterClick);
    var gutters = cm.getOption("gutters");
    for (var i = 0; i < gutters.length && gutters[i] != gutterClass; ++i) {}
    cm.setOption("gutters", gutters.slice(0, i).concat(gutters.slice(i + 1)));
  }

function gutterClick(cm, line, gutter) {
    if (gutter != gutterClass) return;

function clear() {
          cm.setGutterMarker(topLine, gutterClass, null);
          cm.setGutterMarker(botLine, gutterClass, null);
          fold.clear();
        }
        return;
      }
    }

// Start a new fold
    cm.rangeCollapseStart = cm.setGutterMarker(line, gutterClass, makeMarker(true, false));
  }

function makeMarker(isTop, isFinished, handler) {
    var node = document.createElement("div");
    node.innerHTML = isTop ? "\u25bc" : "\u25b2";
    if (!isFinished) node.style.color = "red";
    node.style.fontSize = "85%";
    node.style.cursor = "pointer";
    if (handler) CodeMirror.on(node, "mousedown", handler);
    return node;
  }
})();

Click on the right side of the gutter, then click again below, the code between will collapse. Click on either arrow to expand. To use, simply include the collapserange.js file and set collapseRange: true in options.