From bc96f530601ecfa91ab0306c97e2aa4deb67963a Mon Sep 17 00:00:00 2001
From: NekoCH <96158157+ex-hentai@users.noreply.github.com>
Date: Wed, 17 Sep 2025 17:42:17 +0800
Subject: [PATCH] use details summary for spoiler

---
 include/functions.php   |  8 ++++----
 public/js/nexus.js      |  9 ---------
 public/styles/nexus.css | 12 +++++-------
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/include/functions.php b/include/functions.php
index d11edfcf..b2229321 100644
--- a/include/functions.php
+++ b/include/functions.php
@@ -290,13 +290,13 @@ function formatSpoiler($content, $title = '', $defaultCollapsed = true): string
         $title = $lang_functions['spoiler_default_title'];
     }
 //    $content = str_replace(['<br>', '<br />'], '', $content);
-    $contentClass = "spoiler-content";
+    $contentClass = "";
     if ($defaultCollapsed) {
-        $contentClass .= " collapse";
+        $contentClass .= " open";
     }
     $HTML = sprintf(
-        '<div><div class="spoiler-title-box"><div class="spoiler-title" title="%s">%s</div></div><div class="%s">%s</div></div>',
-        $lang_functions['spoiler_expand_collapse'], $title, $contentClass, $content
+        '<details%s><summary>%s</summary>%s</details>',
+        $contentClass, $title, $content
     );
     return addTempCode($HTML);
 }
diff --git a/public/js/nexus.js b/public/js/nexus.js
index 453bd826..c4ea6628 100644
--- a/public/js/nexus.js
+++ b/public/js/nexus.js
@@ -1,13 +1,4 @@
 jQuery(document).ready(function () {
-    jQuery('.spoiler-title').on('click', function () {
-        let content = jQuery(this).parent().next();
-        if (content.hasClass('collapse')) {
-            content.height(content[0].scrollHeight).removeClass('collapse')
-        } else {
-            content.height(0).addClass('collapse')
-        }
-    })
-
     function getImgPosition(e, imgEle) {
         // console.log(e, imgEle)
         let imgWidth = imgEle.prop('naturalWidth')
diff --git a/public/styles/nexus.css b/public/styles/nexus.css
index f5590989..854dad8a 100644
--- a/public/styles/nexus.css
+++ b/public/styles/nexus.css
@@ -4,20 +4,18 @@ img.hitandrun {
     background: url(icons.gif) no-repeat -100px -171px;
     margin-left: 0.5em;
 }
-.spoiler-title {
+details summary {
+    width: fit-content;
     line-height: 28px;
     color: #4d6c99;
     cursor: pointer;
     font-weight: 700;
     background-color: rgba(77, 108, 153, 0.1);
-    display: inline-block;
     padding: 0 10px;
+    transition: margin .15s ease-out;
 }
-.spoiler-content {
-    display: inline-block;
-    height: 0;
-    overflow: hidden;
-    transition: height 0.3s ease;
+details[open] summary {
+    margin-bottom: 10px;
 }
 .layui-layer {
     color: black;