Hide translation by default, add toggle button

themes/tegakituesday.com/layouts/challenges/single.html

@@ -14,19 +14,22 @@
 		<button id="direction" title="Text direction">↕</button>
 		<button lang="ja" id="highlight" title="Vocab/kanji links">漢字</button>
 		<button lang="ja" id="kyujitai" title="Shinjitai/kyujitai">旧字体</button>
+		{{ if .Params.english }}
+		<button id="english" title="Show/hide translation">Show translation</button>
+		{{ end }}
 		<a id="kyujitai-info" target="_blank" class="clickable-icon" href="https://en.wikipedia.org/wiki/Ky%C5%ABjitai"><i class="fa-solid fa-circle-question"></i></a>
 		<header>
 			<h3>Tegaki Tuesday #{{- $current -}}</h3>
 			<small><ruby>手<rp>(</rp><rt>て</rt><rp>)</rp></ruby><ruby>書<rp>(</rp><rt>が</rt><rp>)</rp></ruby>きの<ruby>火<rp>(</rp><rt>か</rt><rp>)</rp></ruby><ruby>曜<rp>(</rp><rt>よう</rt><rp>)</rp></ruby><ruby>日<rp>(</rp><rt>び</rt><rp>)</rp></ruby>＃{{- $current -}}・<time datetime="{{- .Date.Format " 2006-01-02T15:04:05Z07:00" -}}">{{- .Date.Format "2006年01月02日" -}}</time></small>
 		</header>
 		{{ if .Params.english }}
-		<div id="challenge-english">
+		<div id="challenge-english" style="display: none">
 			<!-- English view -->
 			{{- range.Params.english -}}
 				<p>{{- $.RenderString . -}}</p>
 			{{- end -}}
+			<br>
 		</div>
-		<br>
 		{{ end }}
 		<div id="challenge-vocab" lang="ja">
 			<!-- Vocab view -->

themes/tegakituesday.com/static/js/toggle.js

@@ -4,6 +4,7 @@ const kyujitai = [["万","萬"],["与","與"],["両","兩"],["並","竝"],["乗"
 const challenge = document.getElementById("challenge");
 
 const defaultHeight = challenge.scrollHeight + "px";
+let verticalHeight;
 challenge.style.height = defaultHeight;
 
 const vocab = document.getElementById("challenge-vocab");
@@ -58,6 +59,7 @@ directionButton.addEventListener("click", function() {
 		texts.forEach(text => text.classList.add("vertical"));
 		this.innerHTML = "↔";
 		challenge.style.height = challenge.scrollHeight + "px";
+		verticalHeight = challenge.style.height;
 	} else {
 		texts.forEach(text => text.classList.remove("vertical"));
 		this.innerHTML = "↕";
@@ -66,6 +68,22 @@ directionButton.addEventListener("click", function() {
 });
 directionButton.click();
 
+const englishButton = document.getElementById("english");
+const challengeEnglish = document.getElementById("challenge-english");
+if (englishButton) {
+	englishButton.addEventListener("click", function() {
+		if (this.innerHTML == "Show translation") {
+			challengeEnglish.style.removeProperty("display");
+			this.innerHTML = "Hide translation";
+			challenge.style.height = challenge.scrollHeight + "px";
+		} else {
+			challengeEnglish.style.display = "none";
+			this.innerHTML = "Show translation";
+			challenge.style.height = directionButton.innerHTML == "↕" ? defaultHeight : verticalHeight;
+		}
+	});
+}
+
 document.getElementById("highlight").addEventListener("click", function() {
 	if (this.innerHTML === "漢字") {
 		vocab.style.display = "none";