diff --git a/background/storage.js b/background/storage.js
index 7b7034b..577d899 100644
--- a/background/storage.js
+++ b/background/storage.js
@@ -51,6 +51,7 @@ md.storage.defaults = (compilers) => {
       emoji: false,
       scroll: true,
       toc: false,
+      tocc: false,
       mathjax: false,
       autoreload: false,
       mermaid: false,
diff --git a/content/index.css b/content/index.css
index bb36ce9..db434d2 100644
--- a/content/index.css
+++ b/content/index.css
@@ -180,3 +180,29 @@ img.emojione {
   /* prevent img stretch */
   width: auto;
 }
+
+details>summary {
+
+  list-style: none;
+}
+summary::-webkit-details-marker {
+  display: none
+}
+
+summary {
+  position: relative;
+}
+
+summary::before {
+  font-size: 14px;
+  content: "▷";
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  left: 5%;
+}
+
+details[open]>summary:before {
+  content: "▽";
+}
diff --git a/content/index.js b/content/index.js
index 34875fd..33c40c0 100644
--- a/content/index.js
+++ b/content/index.js
@@ -44,6 +44,12 @@ var oncreate = {
 
     if (state.content.toc && !state.toc) {
       state.toc = toc()
+      if (!state.content.tocc)
+        m.redraw()
+    }
+
+    if (state.content.tocc) {
+      state.toc = tocc()
       m.redraw()
     }
 
@@ -247,6 +253,60 @@ var toc = (
     return html
   }, '')
 
+var tocc = (
+  link = (header) => '<a href="#' + header.id + '">' + header.title + '</a>') => {
+  let toc_array = Array.from($('#_html').childNodes)
+  .filter((node) => /h[1-6]/i.test(node.tagName))
+  .map((node) => ({
+    id: node.getAttribute('id'),
+    level: parseInt(node.tagName.replace('H', '')),
+    title: node.innerText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  }))
+
+  let html = ''
+
+  let add_div_toc = (i) => {
+    html += '<div class="_ul">'
+    html += link(toc_array[i])
+    html += '</div>'
+  }
+
+  let create_toc_html_recursive = (i) => {
+    if (i === toc_array.length - 1) {
+      html += '<div class="_ul">'.repeat(toc_array[i].level)
+      html += link(toc_array[i])
+      html += '</div>'.repeat(toc_array[i].level)
+      return i
+    }
+    let curr_level = toc_array[i].level
+    for (; i < toc_array.length; i++) {
+      if (toc_array[i].level < curr_level) {
+        html += '</div></details>'
+        return i-1
+      }else if (i === toc_array.length - 1){
+        add_div_toc(i)
+        return i
+      } else if (toc_array[i+1].level < curr_level) {
+        add_div_toc(i)
+        html += '</div></details>'
+        return i
+      } else if (toc_array[i+1].level > curr_level) {
+        html += '<details><summary class="_ul">'
+        html += link(toc_array[i])
+        html += '</summary><div class="_ul">'
+        i = create_toc_html_recursive(++i)
+      } else if (toc_array[i+1].level === curr_level) {
+        add_div_toc(i)
+      }
+    }
+    return i
+  }
+
+  create_toc_html_recursive(0)
+  return html
+}
+
+
 if (document.readyState === 'complete') {
   mount()
 }
diff --git a/popup/index.js b/popup/index.js
index 17fa4ee..ba9707f 100644
--- a/popup/index.js
+++ b/popup/index.js
@@ -20,6 +20,7 @@ var state = {
       emoji: 'Convert emoji :shortnames: into EmojiOne images',
       scroll: 'Remember scroll position',
       toc: 'Generate Table of Contents',
+      tocc: 'Generate Table Of Contents collapsible',
       mathjax: 'Render MathJax formulas',
       mermaid: 'Mermaid diagrams',
     }