diff --git a/app/assets/javascripts/legislation.js.coffee b/app/assets/javascripts/legislation.js.coffee
index 02aa5f6ee..303d4c98e 100644
--- a/app/assets/javascripts/legislation.js.coffee
+++ b/app/assets/javascripts/legislation.js.coffee
@@ -1,13 +1,8 @@
 App.Legislation =
 
   initialize: ->
-    $('#js-toggle-debate').on
-      click: ->
-        $('#debate-show').toggle()
-
     $('#js-toggle-small-debate').on
       click: ->
-        $('#debate-show').toggle()
         $(this).find($('span')).toggleClass('icon-angle-up')
 
     $('form#new_legislation_answer input.button').hide()
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 2ec9f8ee9..b4b105b58 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -39,10 +39,6 @@ $border-dark:  darken($border, 10%);
     }
   }
 
-  .legislation-debate-show {
-    display: none;
-  }
-
   .debate-add-info {
     border-top: 1px solid $border-dark;
     margin-top: $line-height;
@@ -360,10 +356,6 @@ $border-dark:  darken($border, 10%);
 .legislation-allegation {
   padding-top: 1rem;
 
-  .legislation-debate-show {
-    margin-top: 2rem;
-  }
-
   .headline {
     margin-bottom: 0;
 
diff --git a/app/views/legislation/processes/_header.html.erb b/app/views/legislation/processes/_header.html.erb
index 4761ed8ef..d228673de 100644
--- a/app/views/legislation/processes/_header.html.erb
+++ b/app/views/legislation/processes/_header.html.erb
@@ -6,7 +6,7 @@
       </div>
     </div>
 
-    <div id="debate-show" class="row description legislation-debate-show">
+    <div id="debate-show" class="row description is-hidden" data-toggler=".is-hidden">
       <div class="small-12 column">
         <% if process.description.present? %>
           <p class="title"><%= t('legislation.processes.header_full.description') %></p>
@@ -17,12 +17,12 @@
         <div class="small-12 column debate-add-info">
           <%= markdown process.additional_info if process.additional_info %>
         </div>
-       <% end %>
+      <% end %>
     </div>
 
     <% if process.description.present? || process.additional_info.present? %>
       <div class="text-center">
-        <a class="button big text-center button-circle" title="<%= t('.view_process_information') %>" id="js-toggle-small-debate">
+        <a class="button big text-center button-circle" title="<%= t('.view_process_information') %>" id="js-toggle-small-debate" data-toggle="debate-show">
           <span class="icon-angle-down" aria-hidden="true"></span>
         </a>
       </div>
diff --git a/app/views/legislation/processes/_header_full.html.erb b/app/views/legislation/processes/_header_full.html.erb
index c265b8847..4505a9ba5 100644
--- a/app/views/legislation/processes/_header_full.html.erb
+++ b/app/views/legislation/processes/_header_full.html.erb
@@ -16,7 +16,7 @@
       <% end %>
     </div>
     <% if process.additional_info.present? %>
-      <div id="debate-show" class="small-12 column debate-add-info legislation-debate-show">
+      <div id="additional_info" class="small-12 column debate-add-info is-hidden" data-toggler=".is-hidden">
         <%= markdown process.additional_info if process.additional_info %>
       </div>
     <% end %>
@@ -24,7 +24,7 @@
 
   <% if process.additional_info.present? %>
     <div class="text-center">
-      <a id="js-toggle-debate" class="button big text-center" title="<%= t('.more_info') %>">
+      <a id="js-toggle-debate" class="button big text-center" title="<%= t('.more_info') %>" data-toggle="additional_info">
         <strong><%= t('.more_info') %></strong>
       </a>
     </div>