diff --git a/_includes/2017/comments-area.html b/_includes/2017/comments-area.html
index 31409d56d..21a37217a 100644
--- a/_includes/2017/comments-area.html
+++ b/_includes/2017/comments-area.html
@@ -1,10 +1,20 @@
-<section class='comments-area'>
+<section class='comments-area' id='comments'>
   <div class='container'>
-    <div class='comments-section'>
-      <div class='comments'>
-        <div id='disqus_thread'></div>
-        <noscript data-js-disqus='{"host":"{{ site.disqus_host }}","url":"{{ site.url }}{{ include.page.url | remove: '.html' }}","identifier": "{{ include.page.url | remove: '.html' | remove_first: '/' }}"}'></noscript>
+    <details class='comments-details'>
+      <summary>
+        <strong class='count'>
+          <span class='disqus-comment-count' data-disqus-url='{{ site.url }}{{ include.page.url | remove: '.html' }}#disqus_thread'></span>
+        </strong>
+      </summary>
+      <div class='comments-section'>
+        <div class='comments'>
+          <div id='disqus_thread'></div>
+          <noscript data-js-disqus='{"host":"{{ site.disqus_host }}","url":"{{ site.url }}{{ include.page.url | remove: '.html' }}","identifier": "{{ include.page.url | remove: '.html' | remove_first: '/' }}"}'></noscript>
+        </div>
       </div>
-    </div>
+    </details>
   </div>
 </section>
+
+<script id='dsq-count-scr' src='//{{ site.disqus_host }}/count.js' async></script>
+
diff --git a/_sass/2017/components/comments-details.scss b/_sass/2017/components/comments-details.scss
new file mode 100644
index 000000000..ceb709efe
--- /dev/null
+++ b/_sass/2017/components/comments-details.scss
@@ -0,0 +1,37 @@
+/*
+ * Comments disclosure triangle
+ */
+
+.comments-details {
+  & > summary {
+    margin-bottom: 16px;
+    white-space: nowrap;
+    cursor: pointer;
+    color: $base-text;
+  }
+
+  & > summary::after {
+    content: '';
+    display: block;
+    background: linear-gradient(to right, $dark-line-color 50%, transparent);
+    margin-top: 16px;
+    height: 1px;
+  }
+
+  & > summary:hover,
+  & > summary:focus {
+    color: $base-a;
+  }
+
+  & > summary > strong {
+    @include font-size(1);
+    font-weight: normal;
+  }
+
+  & > summary > strong::before {
+    @include ion-icon('md-chatboxes');
+    color: $base-a;
+    font-size: 24px;
+    margin: 0 16px 0 8px;
+  }
+}
diff --git a/_sass/2017/components/comments-section.scss b/_sass/2017/components/comments-section.scss
index 540565bd5..f7b054779 100644
--- a/_sass/2017/components/comments-section.scss
+++ b/_sass/2017/components/comments-section.scss
@@ -16,7 +16,7 @@
   }
 
   // Desktop: partial width
-  @media (min-width: 481px) {
+  @media (min-width: 769px) {
     & > .comments {
       flex: 0 1 66%;
       min-width: 300px;
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index 8bc52f4ac..946b982f9 100644
--- a/_sass/2017/style.scss
+++ b/_sass/2017/style.scss
@@ -18,6 +18,7 @@
 @import './components/back-button';
 @import './components/body-area';
 @import './components/comments-area';
+@import './components/comments-details';
 @import './components/comments-section';
 @import './components/h2-section';
 @import './components/h3-section';