better code expansion

css/custom.css

@@ -94,12 +94,20 @@ body .content-root {
 .code_sample code.expanded,
 .code_sample .hljs.expanded {
     max-height: none;
-    width: 100%;
+    position: absolute;
 }
 
 .code_sample { position: relative; }
 .code_sample .code_toggler { position: absolute; bottom: 0; right: 0; }
 
+.code-placeholder {
+    margin: 11px;
+}
+
+.content-root pre {
+    overflow: visible;
+}
+
 .content code { color: #111; }
 
 /* code tabs css */

js/expandcode.js

@@ -1,7 +1,20 @@
 var toggle_cs = function(eo) {
     //eo = $("#"+id);
     var wrapper = $(eo.target).parent();
-    wrapper.find("code").toggleClass('expanded');
+    var code_el = wrapper.find("code");
+    code_el.toggleClass('expanded');
+    var placeholders = wrapper.find(".code-placeholder");
+    if (placeholders.length) {
+        console.log("bye bye placeholders");
+        placeholders.remove();
+    } else {
+        console.log("makin' a placeholder");
+        code_el.after("<div class='code-placeholder' style='width:"
+                            + code_el.width()
+                            + "px; height:"
+                            + code_el.height()
+                            + "px;'>&nbsp;</div>");
+    }
     current_button_text = wrapper.find(".code_toggler").val();
     $(eo.target).val(current_button_text == 'Expand' ? "Collapse" : "Expand");
 }
@@ -14,9 +27,7 @@ function make_code_expandable() {
     });
 
     var cs = $('.code_sample');
-    cs.find("code").dblclick(function(eo) {
-        $(eo.target).toggleClass('expanded');
-    });
+    cs.find("code").dblclick(toggle_cs);
     cs.find("code").attr('title', 'Double-click to expand/collapse');
     var newbtn = $("<input type='button' class='code_toggler' value='Expand' />");
     newbtn.appendTo(cs);

js/multicodetab.js

@@ -49,7 +49,7 @@ jQuery.fn.multicode_tabs_pandoc = function() {
         
         cb_area.children('pre').each(function(index2,el2) {
             var linkid = 'code-'+index+'-'+index2;
-            $(el2).wrap("<div id='"+linkid+"'>");
+            $(el2).wrap("<div id='"+linkid+"' class='code_sample'>");
             //also put in a link to this in the tab header ul
             $('ul', cb_area).append("<li><a href='#"+linkid+"'></a></li>");
         });