diff --git a/css/custom.css b/css/custom.css
index e6a0d23d4d..3e7052f64f 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -90,9 +90,17 @@ body .content-root {
 }
 
 /* code samples scrolling */
-code { max-height: 14em; overflow: auto;}
+.code_sample code { max-height: 14em; overflow: auto;}
+.code_sample code.expanded,
+.code_sample .hljs.expanded {
+    max-height: none;
+    width: 100%;
+}
+
+.code_sample { position: relative; }
+.code_sample .code_toggler { position: absolute; bottom: 0; right: 0; }
+
 .content code { color: #111; }
-.expanded { max-height: none; overflow: none;}
 
 /* code tabs css */
 .multicode {
diff --git a/js/expandcode.js b/js/expandcode.js
index efaaea0492..040c7c455c 100644
--- a/js/expandcode.js
+++ b/js/expandcode.js
@@ -1,8 +1,26 @@
+var toggle_cs = function(eo) {
+    //eo = $("#"+id);
+    var wrapper = $(eo.target).parent();
+    wrapper.find("code").toggleClass('expanded');
+    current_button_text = wrapper.find(".code_toggler").val();
+    $(eo.target).val(current_button_text == 'Expand' ? "Collapse" : "Expand");
+}
+
 function make_code_expandable() {
-    $('code').dblclick(function(eo) {
+    var newid = 0;
+    $(".content > pre > code").parent().wrap(function() {
+        newid = newid+1;
+        return "<div class='code_sample' id='code_autoid_"+newid+"'>";
+    });
+
+    var cs = $('.code_sample');
+    cs.find("code").dblclick(function(eo) {
         $(eo.target).toggleClass('expanded');
     });
-    $('code').attr('title', 'Double-click to expand/collapse');
+    cs.find("code").attr('title', 'Double-click to expand/collapse');
+    var newbtn = $("<input type='button' class='code_toggler' value='Expand' />");
+    newbtn.appendTo(cs);
+    $(".code_toggler").click(toggle_cs);
 }
 
 $(document).on('flatdoc:ready', make_code_expandable);
diff --git a/js/multicodetab.js b/js/multicodetab.js
index 789d31ea17..33f93ae5ef 100644
--- a/js/multicodetab.js
+++ b/js/multicodetab.js
@@ -16,7 +16,7 @@ jQuery.fn.multicode_tabs = function() {
         // for each code, give it a unique ID and wrap it in a pre
         cb_area.children('code').each(function(index2,el2) {
             var linkid = 'code-'+index+'-'+index2;
-            $(el2).wrap("<div id='"+linkid+"'><pre>");
+            $(el2).wrap("<div id='"+linkid+"' class='code_sample'><pre>");
             //also put in a link to this in the tab header ul
             $('ul', cb_area).append("<li><a href='#"+linkid+"'></a></li>");
         });