Restyle expandable blocks

app/assets/javascripts/dtext.js

@@ -14,7 +14,13 @@
   Danbooru.Dtext.initialize_expandables = function($parent) {
     $parent.find(".expandable-content").hide();
     $parent.find(".expandable-button").click(function(e) {
-      $(this).parent().next().fadeToggle("fast");
+      var button = $(this);
+      button.parent().next().fadeToggle("fast");
+      if (button.val() === "Show") {
+        button.val("Hide");
+      } else {
+        button.val("Show");
+      }
     });
   }
 

app/assets/stylesheets/common/dtext.css.scss

@@ -61,30 +61,20 @@ div.prose {
 
   div.expandable {
     margin-bottom: 1em;
-    border: 1px solid #666;
+    border: 1px inset #666;
-    background: #EEE;
   }
 
   div.expandable-header {
-    padding: 0.7em;
+    padding: 0.4em;
 
     span {
-      margin-right: 1em;
+      margin-right: 0.5em;
       font-weight: bold;
     }
   }
 
-  div.expandable-button {
-    padding: 0.3em;
-    display: inline-block;
-    border: 1px solid #666;
-    border-radius: 3px;
-    background: #CCC;
-    cursor: pointer;
-  }
-
   div.expandable-content {
-    padding: 0.7em;
+    padding: 0.4em;
     border-top: 1px solid #666;
 
     > :last-child {

app/logical/d_text.rb

@@ -214,7 +214,7 @@ class DText
         stack << "expandable"
         expand_html = '<div class="expandable"><div class="expandable-header">'
         expand_html << "<span>#{h($1)}</span>" if $1.present?
-        expand_html << '<div class="expandable-button">Show</div></div>'
+        expand_html << '<input type="button" value="Show" class="expandable-button"/></div>'
         expand_html << '<div class="expandable-content">'
         expand_html