diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 49bbf8b2b..29ee399ef 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -139,7 +139,6 @@ var initialize_modules = function() {
   App.MarkdownEditor.initialize();
   App.HTMLEditor.initialize();
   App.LegislationAdmin.initialize();
-  App.LegislationAllegations.initialize();
   App.Legislation.initialize();
   if ($(".legislation-annotatable").length) {
     App.LegislationAnnotatable.initialize();
diff --git a/app/assets/javascripts/legislation_allegations.js b/app/assets/javascripts/legislation_allegations.js
index f5970b8e5..fe1f596be 100644
--- a/app/assets/javascripts/legislation_allegations.js
+++ b/app/assets/javascripts/legislation_allegations.js
@@ -1,36 +1,10 @@
 (function() {
   "use strict";
   App.LegislationAllegations = {
-    toggle_comments: function() {
-      if (!App.LegislationAnnotatable.isMobile()) {
-        $(".draft-allegation").toggleClass("comments-on");
-        $("#comments-box").html("").hide();
-      }
-    },
     show_comments: function() {
       if (!App.LegislationAnnotatable.isMobile()) {
-        $(".draft-allegation").addClass("comments-on");
+        document.querySelector(".draft-allegation details.calc-comments").open = true;
       }
-    },
-    initialize: function() {
-      $(".js-toggle-allegations .draft-panel").on({
-        click: function(e) {
-          e.preventDefault();
-          e.stopPropagation();
-          if (!App.LegislationAnnotatable.isMobile()) {
-            App.LegislationAllegations.toggle_comments();
-          }
-        }
-      });
-      $(".js-toggle-allegations").on({
-        click: function() {
-          if (!App.LegislationAnnotatable.isMobile()) {
-            if ($(this).find(".draft-panel .panel-title:visible").length === 0) {
-              App.LegislationAllegations.toggle_comments();
-            }
-          }
-        }
-      });
     }
   };
 }).call(this);
diff --git a/app/assets/javascripts/legislation_annotatable.js b/app/assets/javascripts/legislation_annotatable.js
index 3959dc5eb..85743b305 100644
--- a/app/assets/javascripts/legislation_annotatable.js
+++ b/app/assets/javascripts/legislation_annotatable.js
@@ -40,8 +40,10 @@
     },
     renderAnnotationComments: function(event) {
       if (event.offset) {
+        var default_top = $(".calc-comments").offset().top + $(".calc-comments .draft-panel").outerHeight();
+
         $("#comments-box").css({
-          top: event.offset - $(".calc-comments").offset().top
+          top: event.offset - default_top
         });
       }
       if (App.LegislationAnnotatable.isMobile()) {
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 0d54f87ab..0b557a869 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -380,39 +380,34 @@
 
     @include breakpoint(medium) {
       display: flex;
-      padding-left: rem-calc(15);
-      padding-right: rem-calc(15);
-    }
 
-    .calc-index {
-      .draft-panel {
-        cursor: pointer;
-      }
-
-      .draft-index-rotated {
-        display: none;
-      }
-    }
-
-    @media screen and (min-width: 40em) {
       .calc-index {
-        width: calc(35% - 25px);
+        max-width: calc(35% - 25px);
+
+        .draft-index {
+          @supports (position: sticky) {
+            max-height: 100vh;
+            overflow-y: auto;
+            position: sticky;
+            top: $line-height;
+          }
+        }
+
+        > * {
+          padding-right: rem-calc(20);
+        }
       }
 
       .calc-text {
-        width: calc(65% - 25px);
+        flex: 1;
       }
 
       .calc-comments {
-        cursor: pointer;
-        background: #f2f2f2;
-        width: rem-calc(50);
+        min-width: 15rem;
+        width: calc(35% - 25px);
 
-        .draft-panel {
-
-          .panel-title {
-            display: none;
-          }
+        > * {
+          padding-left: rem-calc(20);
         }
       }
     }
@@ -445,7 +440,6 @@
         line-height: 0;
         color: $text-medium;
         vertical-align: sub;
-        margin-right: rem-calc(4);
       }
     }
 
@@ -491,6 +485,8 @@
       padding: rem-calc(16);
 
       @include breakpoint(medium) {
+        margin: 0 auto;
+        max-width: 3 * $grid-row-width / 4;
         padding: rem-calc(32) rem-calc(32) rem-calc(32) rem-calc(48);
       }
 
@@ -538,60 +534,54 @@
 
     .calc-comments {
       position: relative;
+    }
 
-      .comment-box {
+    summary {
+      cursor: pointer;
+      list-style: none;
+
+      &::-webkit-details-marker {
         display: none;
       }
-
-      .draft-comments-rotated {
-        @include breakpoint(medium) {
-          font-size: $small-font-size;
-          text-transform: uppercase;
-          font-weight: 700;
-          color: #696969;
-          margin-top: rem-calc(64);
-          transform: rotate(-90deg);
-          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-        }
-      }
     }
-  }
 
-  .comments-on {
-    .calc-index {
-      width: rem-calc(50);
+    details:not([open]) {
       background: #f2f2f2;
-      cursor: pointer;
 
-      .panel-title {
-        display: none;
+      @include breakpoint(small only) {
+        border-bottom: 1px solid #d4d4d4;
       }
 
-      .draft-index {
-        display: none;
-      }
+      @include breakpoint(medium) {
+        min-width: auto;
+        width: rem-calc(50);
 
-      .draft-index-rotated {
-        @include breakpoint(medium) {
+        .draft-panel {
           line-height: 1;
           display: block;
           font-size: $small-font-size;
           text-transform: uppercase;
           font-weight: 700;
           color: #696969;
-          margin-top: $line-height;
-          transform: rotate(-90deg);
-          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+          padding: 0;
+          text-align: center;
+
+          .icon-banner::before,
+          .icon-comments::before {
+            display: block;
+            margin: rem-calc(24) auto rem-calc(36);
+          }
 
           .panel-title {
             display: block;
+            transform: rotate(-90deg);
+            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
           }
         }
       }
     }
 
     .calc-text {
-      width: calc(65% - 25px);
       border-right: 0;
 
       .show-comments {
@@ -611,23 +601,23 @@
     .calc-comments {
       background: #fff;
       cursor: auto;
-      width: calc(35% - 25px);
 
-      .draft-panel {
-        cursor: pointer;
+      @include breakpoint(small only) {
+        summary {
+          display: none;
+        }
       }
 
-      .draft-comments-rotated {
-        display: none;
+      &:not([open]) {
+        border-left: 1px solid #d4d4d4;
       }
 
       .comments-box-container {
-        position: absolute;
-        top: rem-calc(230);
+        position: relative;
+        top: rem-calc(180);
       }
 
       .comment-box {
-        width: rem-calc(375);
         padding: rem-calc(4);
         background: #f9f9f9;
         border: 1px solid $border;
@@ -803,15 +793,6 @@
           }
         }
       }
-
-      .draft-panel {
-        background: #e5e5e5;
-        border-left: 1px solid #d4d4d4;
-
-        .panel-title {
-          display: inline-block;
-        }
-      }
     }
   }
 }
diff --git a/app/views/legislation/draft_versions/_comments_panel.html.erb b/app/views/legislation/draft_versions/_comments_panel.html.erb
index 41d26c80f..178fca4e3 100644
--- a/app/views/legislation/draft_versions/_comments_panel.html.erb
+++ b/app/views/legislation/draft_versions/_comments_panel.html.erb
@@ -1,13 +1,8 @@
-<div class="small-12 calc-comments end column js-toggle-allegations">
-  <div class="draft-panel">
-    <div>
-      <span class="icon-comments" aria-hidden="true"></span> <span class="panel-title"><%= t("legislation.draft_versions.show.text_comments") %></span>
-    </div>
-  </div>
-
-  <div class="draft-comments-rotated text-center">
+<details open=open class="calc-comments">
+  <summary class="draft-panel">
+    <span class="icon-comments" aria-hidden="true"></span>
     <span class="panel-title"><%= t("legislation.draft_versions.show.text_comments") %></span>
-  </div>
+  </summary>
 
   <div id="comments-box" class="comments-box-container" style="display: none;">
     <div class="comment-box">
@@ -17,4 +12,4 @@
       </div>
     </div>
   </div>
-</div>
+</details>
diff --git a/app/views/legislation/draft_versions/show.html.erb b/app/views/legislation/draft_versions/show.html.erb
index 2123fa61b..f4f1ad0ed 100644
--- a/app/views/legislation/draft_versions/show.html.erb
+++ b/app/views/legislation/draft_versions/show.html.erb
@@ -42,26 +42,18 @@
 
     <%= render "legislation/processes/help_gif" %>
 
-    <div class="row draft-allegation medium-collapse comments-on">
-      <div class="small-12 calc-index column <%= "js-toggle-allegations" unless @draft_version.final_version? %>">
-        <div class="draft-panel">
-          <div>
-            <span class="icon-banner" aria-hidden="true"></span>
-            <span class="panel-title"><%= t("legislation.draft_versions.show.text_toc") %></span>
-          </div>
-        </div>
-
-        <div class="draft-index-rotated text-center">
+    <div class="draft-allegation">
+      <details class="calc-index">
+        <summary class="draft-panel">
+          <span class="icon-banner" aria-hidden="true"></span>
           <span class="panel-title"><%= t("legislation.draft_versions.show.text_toc") %></span>
-        </div>
+        </summary>
 
-        <div data-sticky-container>
-          <div data-sticky data-anchor="sticky-panel" class="draft-index sticky" data-tree-navigator>
-            <%= AdminLegislationSanitizer.new.sanitize(@draft_version.toc_html) %>
-          </div>
+        <div class="draft-index" data-tree-navigator>
+          <%= AdminLegislationSanitizer.new.sanitize(@draft_version.toc_html) %>
         </div>
-      </div>
-      <div class="small-12 calc-text column border-right border-left">
+      </details>
+      <div class="calc-text border-right border-left">
         <div class="draft-panel">
           <div><span class="panel-title"><%= t("legislation.draft_versions.show.text_body") %></span></div>
         </div>
@@ -80,7 +72,7 @@
       </div>
 
       <% if @draft_version.final_version? %>
-        <div class="small-12 calc-comments end column"></div>
+        <div class="calc-comments"></div>
       <% else %>
         <%= render "comments_panel", draft_version: @draft_version %>
       <% end %>