use details summary for spoiler

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>',
+        '<details%s><summary>%s</summary>%s</details>',
-        $lang_functions['spoiler_expand_collapse'], $title, $contentClass, $content
+        $contentClass, $title, $content
     );
     return addTempCode($HTML);
 }

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')

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 {
+details[open] summary {
-    display: inline-block;
+    margin-bottom: 10px;
-    height: 0;
-    overflow: hidden;
-    transition: height 0.3s ease;
 }
 .layui-layer {
     color: black;