Add expanded section support

Gemfile.lock

@@ -7,9 +7,9 @@ GIT
 
 GIT
   remote: https://github.com/zwagoth/dtext_rb.git
-  revision: dd6fe370a5705daba54a6a1e264e5e0a48743a8c
+  revision: f7cf8a7fcfe49c47f0702fe122005c61982f132f
   specs:
-    dtext_rb (1.10.2)
+    dtext_rb (1.10.4)
       nokogiri (~> 1.8)
 
 GEM

app/javascript/src/javascripts/dtext.js

@@ -10,16 +10,12 @@ Dtext.initialize_links = function() {
 }
 
 Dtext.initialize_expandables = function() {
-  $(document).on("click.danbooru", ".expandable-button", function(e) {
-    var button = $(this);
-    button.parent().next().fadeToggle("fast");
-    if (button.val() === "Show") {
-      button.val("Hide");
-    } else {
-      button.val("Show");
-    }
+  $(document).on("click.danbooru", ".expandable-header", function(e) {
+    const header = $(this);
+    header.next().fadeToggle("fast");
+    header.parent().toggleClass("expanded");
   });
-}
+};
 
 Dtext.call_preview = function(e, $button, $input, $preview) {
   $button.val("Edit");

app/javascript/src/styles/common/dtext.scss

@@ -68,24 +68,39 @@
   div.expandable {
     margin-bottom: 1em;
     border: 1px inset #666;
-  }
 
-  div.expandable-header {
-    padding: 0.4em;
+    div.expandable-header {
+      padding: 0.4em;
 
-    span {
-      margin-right: 0.5em;
-      font-weight: bold;
+      .section-arrow::after {
+        content: '►';
+      }
+
+      span {
+        margin-right: 0.5em;
+        font-weight: bold;
+      }
+    }
+
+    div.expandable-content {
+      display: none;
+      padding: 0.4em;
+      border-top: 1px solid #666;
+
+      > :last-child {
+        margin-bottom: 0;
+      }
     }
   }
 
-  div.expandable-content {
-    display: none;
-    padding: 0.4em;
-    border-top: 1px solid #666;
-
-    > :last-child {
-      margin-bottom: 0;
+  div.expandable.expanded {
+    div.expandable-content {
+      display: block;
+    }
+    div.expandable-header {
+      .section-arrow::after {
+        content: '▼';
+      }
     }
   }