Cleaner output function

_layouts/rule.html

@@ -69,7 +69,7 @@ layout: default
   padding: 5px;
   font-size: 1.2em;
 }
-#displayRule {
+#displayModeToggle {
   clear: both;
   border: 1px solid gray;
   color: gray;
@@ -138,11 +138,23 @@ layout: default
       }
   }
 
-  function displayRule() {
-      var ruleboxEl = document.getElementById('rulebox').outerHTML;    
-      document.write(ruleboxEl);
-      editMode = true;
-      toggleEditMode();
+  var displayMode = false;
+  function displayModeToggle() {
+      if (displayMode == false) {
+          classDisplayAll("site-header","none");
+          classDisplayAll("post-header","none");
+          classDisplayAll("explanatory","none");
+          classDisplayAll("site-footer","none");
+          document.getElementById("displayModeToggle").innerHTML = "Edit";
+          displayMode = true;
+      } else {
+          classDisplayAll("site-header","block");
+          classDisplayAll("post-header","block");
+          classDisplayAll("explanatory","block");
+          classDisplayAll("site-footer","block");
+          document.getElementById("displayModeToggle").innerHTML = "Display";
+          displayMode = false;
+      }
   }
   
 </script>
@@ -153,13 +165,15 @@ layout: default
     <h1 class="post-title" id="title">      
         {{ page.title }}
     </h1>
-  </header>
+
 
   <button id="editToggle" onclick="toggleEditMode()">Preview</button>
 
   <div class="post-content">    
     {{ content }}
   </div>
+
+  </header>
   
   <div id="rulebox">
 
@@ -274,8 +288,8 @@ layout: default
   
   </div><!--#rulebox-->
 
-  <p>When you're finished, use the button below and print, copy/paste, or save your Rule to where your community can keep track of it and edit it in the future. <strong>You won't be able to edit here after displaying.</strong></p>
+  <p class="explanatory">When you're finished, use the button below and print, copy/paste, or save your Rule to where your community can keep track of it and edit it in the future.</p>
   
-  <button id="displayRule" onclick="displayRule()">Display Rule</button>
+  <button id="displayModeToggle" onclick="displayModeToggle()">Display</button>
     
 </article>