Panel Demo

I'm panel n°1
x
 
1
<p>
2
  <a class="add-panel" onclick="addPanel('top')">top</a>
3
  <a class="add-panel" onclick="addPanel('after-top')">after-top</a>
4
  <a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a>
5
  <a class="add-panel" onclick="addPanel('bottom')">bottom</a>
6
</p>
7
<p>
8
  You can also replace an existing panel:
9
</p>
10
<form onsubmit="return replacePanel(this);" name="replace_panel">
11
  <input type="submit" value="Replace panel n°">
12
  <input type="number" name="panel_id" min="1" value="1">
13
</form>
14
15
<script>
16
var textarea = document.getElementById("code");
17
var demo = document.getElementById("demo");
18
var numPanels = 0;
19
var panels = {};
20
var editor;
21
22
textarea.value = demo.innerHTML.trim();
23
editor = CodeMirror.fromTextArea(textarea, {
24
  lineNumbers: true,
25
  mode: "htmlmixed"
26
});
27
28
function makePanel(where) {
29
  var node = document.createElement("div");
30
  var id = ++numPanels;
31
  var widget, close, label;
32
33
  node.id = "panel-" + id;
34
  node.className = "panel " + where;
35
  close = node.appendChild(document.createElement("a"));
36
  close.setAttribute("title", "Remove me!");
37
  close.setAttribute("class", "remove-panel");
38
  close.textContent = "✖";
39
  CodeMirror.on(close, "click", function() {
40
    panels[node.id].clear();
41
  });
42
  label = node.appendChild(document.createElement("span"));
43
  label.textContent = "I'm panel n°" + id;
44
  return node;
45
}
46
function addPanel(where) {
47
  var node = makePanel(where);
48
  panels[node.id] = editor.addPanel(node, {position: where});
49
}
50
51
addPanel("top");
52
addPanel("bottom");
53
54
function replacePanel(form) {
55
  var id = form.elements.panel_id.value;
56
  var panel = panels["panel-" + id];
57
  var node = makePanel("");
58
59
  panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top"});
60
  return false;
61
}
62
</script>
I'm panel n°2

The panel addon allows you to display panels above or below an editor.
Click the links below to add panels at the given position:

top after-top before-bottom bottom

You can also replace an existing panel: