diff --git a/plugins/details.rb b/plugins/details.rb
index 8eb23798724..9d0d6f00f46 100644
--- a/plugins/details.rb
+++ b/plugins/details.rb
@@ -40,29 +40,17 @@ module Jekyll
       end
 
       <<~MARKUP
-        <script>
-        function showDetails(el) {
-          const content = el.parentElement.querySelector(".details-block-content");
-          const up = el.querySelector("svg#up");
-          const down = el.querySelector("svg#down");
-          const shouldExpand = down.style.display === "block";
-          up.style.display = shouldExpand ? "block" : "none";
-          down.style.display = !shouldExpand ? "block" : "none";
-          content.hidden = !shouldExpand;
-          el.ariaExpanded = shouldExpand;
-        }
-        </script>
         <div class="details-block">
-          <div class='details-block-item'>
-            <button class='details-block-title' onclick='showDetails(this)' aria-controls="content_#{idx}" aria-expanded="false">
+          <details class='details-block-item'>
+            <summary class='details-block-title'>
               <span>#{icon}#{title}</span>
               <div class='details-block-arrow'>
-              <svg id="down" style="display: block;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
-              <svg id="up" style="display: none;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
+              <svg class="down" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+              <svg class="up" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
               </div>
-            </button>
-            <div class='details-block-content' id="content_#{idx}" hidden>#{contents}</div>
-          </div>
+            </summary>
+            <div class='details-block-content' id="content_#{idx}">#{contents}</div>
+          </details>
         </div>
       MARKUP
     end
diff --git a/sass/homeassistant/plugins/_details.scss b/sass/homeassistant/plugins/_details.scss
index 6d46cf2f6f5..f4f481b2cd7 100644
--- a/sass/homeassistant/plugins/_details.scss
+++ b/sass/homeassistant/plugins/_details.scss
@@ -10,6 +10,16 @@ div.details-block {
     border: 1px solid rgba(0, 0, 0, .12);
     border-radius: 16px;
 
+    &[open] .details-block-title {
+      .up {
+        display: block;
+      }
+
+      .down {
+        display: none;
+      }
+    }
+
     .details-block-title {
       font-weight: bold;
       font-size: 18px;
@@ -23,6 +33,14 @@ div.details-block {
       border: 0px;
       width: 100%;
       padding: 0;
+
+      .up {
+        display: none;
+      }
+
+      .down {
+        display: block;
+      }
     }
     .details-block-content {
       margin: 4px 0 12px 0;