diff --git a/src/common/utils/comment.ts b/src/common/utils/comment.ts
index 4b67d5bbd5..f81a30050f 100644
--- a/src/common/utils/comment.ts
+++ b/src/common/utils/comment.ts
@@ -13,17 +13,18 @@ interface Comment {
 }
 
 export const filterComment = (comment: Comment) => {
-  const isActive = comment.state === 'active'
+  // skip if comment's state is active or collapse
+  if (comment.state === 'active' || comment.state === 'collapsed') {
+    return true
+  }
+
   const isDescendant = comment.parentComment && comment.parentComment.id
   const descendants = _get(comment, 'comments.edges', [])
   const hasActiveDescendants =
-    descendants.filter(({ node }: { node: Comment }) => node.state === 'active')
-      .length > 0
-
-  // skip if comment's state is active
-  if (isActive) {
-    return true
-  }
+    descendants.filter(
+      ({ node }: { node: Comment }) =>
+        node.state === 'active' || node.state === 'collapsed'
+    ).length > 0
 
   // filter out if it's a decendant comment
   if (isDescendant) {
diff --git a/src/views/ArticleDetail/Responses/ResponseComment/index.tsx b/src/views/ArticleDetail/Responses/ResponseComment/index.tsx
index 7dbdf32607..31516cbc00 100644
--- a/src/views/ArticleDetail/Responses/ResponseComment/index.tsx
+++ b/src/views/ArticleDetail/Responses/ResponseComment/index.tsx
@@ -90,7 +90,6 @@ const ResponseComment = ({
           )}
         </ul>
       )}
-
       <style jsx>{styles}</style>
     </section>
   )