From c3d3e7d656eebbf30a16ca4e169394ebbac49ea6 Mon Sep 17 00:00:00 2001
From: itchyny <itchyny@cybozu.co.jp>
Date: Mon, 2 Mar 2026 17:46:58 +0900
Subject: [PATCH] Fix buttons in tutorial to toggle labels when clicked on
 (#3493)

---
 docs/public/css/style.css      | 14 +++++++++-----
 docs/templates/default.html.j2 |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/public/css/style.css b/docs/public/css/style.css
index d63e8282..93601370 100644
--- a/docs/public/css/style.css
+++ b/docs/public/css/style.css
@@ -52,13 +52,17 @@ pre {
   border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
 }
 
-button{
-  &[aria-expanded=false] .bi-chevron-down {
-    display: none;
+button {
+  &[aria-expanded=false] {
+    .bi-chevron-down, .hide-result-text {
+      display: none;
+    }
   }
 
-  &[aria-expanded=true] .bi-chevron-right {
-    display: none;
+  &[aria-expanded=true] {
+    .bi-chevron-right, .show-result-text {
+      display: none;
+    }
   }
 }
 
diff --git a/docs/templates/default.html.j2 b/docs/templates/default.html.j2
index 67030e05..ee39e93c 100644
--- a/docs/templates/default.html.j2
+++ b/docs/templates/default.html.j2
@@ -18,7 +18,7 @@
         <div class="d-flex accordion-heading me-2">
           <pre class="flex-grow-1 me-0 mb-0" tabindex="0">{{ item.command }}</pre>
           <button type="button" class="btn btn-sm btn-secondary text-body-secondary bg-secondary-subtle link-body-emphasis flex-shrink-0 d-flex align-items-center border border-start-0 d-print-none"
-            data-bs-toggle="collapse" data-bs-target="#result{{ resultID }}" aria-expanded="false" aria-controls="result{{ resultID }}">Show result</button>
+            data-bs-toggle="collapse" data-bs-target="#result{{ resultID }}" aria-expanded="false" aria-controls="result{{ resultID }}"><span class="show-result-text">Show result</span><span class="hide-result-text">Hide result</span></button>
         </div>
         <pre id="result{{ resultID }}" class="accordion-body collapse p-3 border-top-0 d-print-block" tabindex="0">{{ item.result }}</pre>
       </div>