Fix accordion flicker while loading page

index.html

@@ -68,7 +68,8 @@ <h4 class="button is-normal is-rounded is-dark">
               <svg class="expanded-icon svg-inline--fa fa-file-pdf fa-w-12 display-none" aria-hidden="true" focusable="false" data-prefix="fas" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>
             </span>
           </h4>
-          <div class="columns is-centered">
+          <!-- Mark as hidden while loading (will be overridden by JS) -->
+          <div class="columns is-centered display-none">
             <div class="column has-text-centered publication-info">
               <h3 class="title publication-title">CCIL: Continuity-based Data Augmentation for Corrective Imitation
                 Learning</h3>

static/js/index.js

@@ -43,6 +43,7 @@ $(document).ready(function() {
     $("#accordion").accordion({
       collapsible: true,
       active: false,
+      heightStyle: "content",
       beforeActivate: function(event, ui) {
         if (ui.newPanel.text() !== "") {
           $("#accordion .collapsed-text").addClass("display-none");
@@ -57,4 +58,6 @@ $(document).ready(function() {
         }
       }
     });
+    // unhide content that was collapsed into accordion
+    $("#accordion > div.display-none").removeClass("display-none");
 })