diff --git a/app/scss/main.scss b/app/scss/main.scss
index 8aa23e9..75e8e90 100644
--- a/app/scss/main.scss
+++ b/app/scss/main.scss
@@ -51,17 +51,20 @@ $code-highlight-background: #f0f0f0;
   .p-summary {
     display: inline-block;
   }
-  label {
+  .show-more-btn {
     margin-left: 5px;
   }
-  .show-more-state {
-    display: none;
+  summary {
+    display: inline-block;
   }
-  .show-more-state ~ .obj-content {
-    margin-top: 0;
+  summary::-webkit-details-marker {
+    display: none
   }
-  .show-more-state:checked ~ .obj-content {
-    display: none;
+  &:not([open]) .show-more-btn::after {
+    content: 'show more';
+  }
+  &[open] .show-more-btn::after {
+    content: 'show less';
   }
 }
 .sensitive-attachment {
diff --git a/app/templates/utils.html b/app/templates/utils.html
index f07dee3..7bc01a9 100644
--- a/app/templates/utils.html
+++ b/app/templates/utils.html
@@ -549,12 +549,13 @@
     {% endif %}
 
     {% if object.summary %}
-    <div class="show-more-wrapper">
-        <div class="p-summary">
-            <p>{{ object.summary | clean_html(object) | safe }}</p>
-        </div>
-        <label for="show-more-{{ object.permalink_id }}" class="show-more-btn">show/hide more</label>
-        <input class="show-more-state" type="checkbox" aria-hidden="true" id="show-more-{{ object.permalink_id }}" checked>
+    <details class="show-more-wrapper">
+        <summary>
+            <div class="p-summary">
+                <p>{{ object.summary | clean_html(object) | safe }}</p>
+            </div>
+            <span class="show-more-btn" aria-hidden="true"></span>
+        </summary>
     {% endif %}
         <div class="obj-content">
         <div class="e-content">
@@ -615,7 +616,7 @@
 
         </div>
     {% if object.summary %}
-    </div>
+    </details>
     {% endif %}
 
     <div class="activity-attachment">