use details summary for spoiler

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