diff --git a/layouts/partials/accordion-script.html b/layouts/partials/accordion-script.html
new file mode 100644
index 0000000..7760184
--- /dev/null
+++ b/layouts/partials/accordion-script.html
@@ -0,0 +1,16 @@
+<script>
+  var acc = document.getElementsByClassName("accordion");
+  var i;
+  
+  for (i = 0; i < acc.length; i++) {
+    acc[i].addEventListener("click", function() {
+      this.classList.toggle("active");
+      var panel = this.nextElementSibling;
+      if (panel.style.maxHeight) {
+        panel.style.maxHeight = null;
+      } else {
+        panel.style.maxHeight = panel.scrollHeight + "px";
+      } 
+    });
+  }
+  </script>
\ No newline at end of file
diff --git a/layouts/partials/essay-accordion.html b/layouts/partials/essay-accordion.html
index 93ebe8a..a643b9d 100644
--- a/layouts/partials/essay-accordion.html
+++ b/layouts/partials/essay-accordion.html
@@ -1,6 +1,8 @@
-<h2>{{ .year }}</h2>
-{{ range where .essays "year" .year }}
-  <div class="writing-item">
-    <p>{{ .year }}. <a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
-  </div>
-{{ end }}
\ No newline at end of file
+<button class="accordion">{{ .year }}</button>
+<div class="acc-panel">
+  {{ range where .essays "year" .year }}
+    <div class="writing-item">
+      <p><a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
+    </div>
+  {{ end }}
+</div>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
new file mode 100644
index 0000000..b04d33c
--- /dev/null
+++ b/layouts/partials/head.html
@@ -0,0 +1,37 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {{ $title := print .Site.Title " | " .Title }}
+  {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
+  {{/*  scss compiling  */}}
+  {{ $options := (dict "targetPath" "css/style.css" "outputStyle" "compressed") }}
+  {{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options }}
+  {{ template "_internal/twitter_cards.html" . }}
+  <link href='{{ $style.RelPermalink }}' rel="stylesheet">
+  <title>{{ $title }}</title>
+  {{- partial "octocss.html" . -}}
+  {{ if eq .Title "Writing" }}
+    <style>
+      .accordion {
+        background-color: transparent;
+        color: #444;
+        cursor: pointer;
+        padding: 18px;
+        width: 100%;
+        border: none;
+        text-align: left;
+        outline: none;
+        font-size: 15px;
+        transition: 0.4s;
+      }
+      
+      .acc-panel {
+        padding: 0 18px;
+        background-color: white;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.2s ease-out;
+      }
+    </style>
+  {{ end }}
+</head>
diff --git a/layouts/writing/list.html b/layouts/writing/list.html
index 625b344..866e75b 100644
--- a/layouts/writing/list.html
+++ b/layouts/writing/list.html
@@ -13,6 +13,7 @@
             {{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2019)}}
             {{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2018)}}
             {{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2017)}}
+            {{ partial "accordion-script"}}
           </div>
         </div>
       </div>
