From 5f1934565354e4576c285f46d18530a7a6b947aa Mon Sep 17 00:00:00 2001
From: Lynne <lynne@bune.city>
Date: Sun, 1 Mar 2020 16:47:33 +1000
Subject: [PATCH] use JS to show/hide subrecipes

---
 _includes/ingredients.html |  2 +-
 _layouts/default.html      |  1 +
 _layouts/recipe.html       |  5 +++--
 style.css                  | 17 +++++++++++++++++
 4 files changed, 22 insertions(+), 3 deletions(-)
diff --git a/_includes/ingredients.html b/_includes/ingredients.html
index b146c72..615f5f2 100644
--- a/_includes/ingredients.html
+++ b/_includes/ingredients.html
@@ -5,6 +5,6 @@
 <{{tag}}>Ingredients</{{tag}}>
 <ul>
 	{% for item in page.ingredients -%}
-	<li>{{ item[0] }} {%- if item[2] %} {{ item[2] }} of {% endif %} {{ item[1] }}</li>
+	<li>{{ item[0] }} {%- if item[2] %} {{ item[2] }} of {% endif -%} {{ item[1] }}</li>
 	{% endfor -%}
 </ul>
diff --git a/_layouts/default.html b/_layouts/default.html
index ca20162..c3dd48f 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,6 +4,7 @@
 <head>
 	<meta charset="UTF-8">
 	<link rel='stylesheet' href='/style.css'>
+	<script async src='/script.js'></script>
 	<title>{{ page.title }}</title>
 </head>
 
diff --git a/_layouts/recipe.html b/_layouts/recipe.html
index 7c8addd..d4bde9a 100644
--- a/_layouts/recipe.html
+++ b/_layouts/recipe.html
@@ -33,8 +33,9 @@ layout: default
 	<h2> Subrecipes </h2>
 	{% for subrecipe in site.subrecipes -%}
 		{%- if subrecipe.parents contains id -%}
-			<div class='subrecipe' id='sr-{{ subrecipe.name | downcase | url_encode }}'>
-				<h3>{{ subrecipe.name }}</h3>
+		{%- assign srid = "sr-" | append: subrecipe.name | downcase | url_encode -%}
+			<div class='subrecipe' id='{{ srid }}'>
+				<div class='subrecipe-heading'><h3>{{ subrecipe.name }}</h3><span class='subrecipe-toggle show' onclick="subrecipe_toggle('{{ srid }}');"></span></div>
 				<div class='subrecipe-output'>
 					{{ subrecipe.output }}
 				</div>
diff --git a/style.css b/style.css
index 71e9d3d..8ceda69 100644
--- a/style.css
+++ b/style.css
@@ -24,6 +24,23 @@ body div {
 	height: min-content;
 }
 
+.subrecipe-heading h3 {
+	display: inline-block;
+}
+
+.subrecipe-toggle {
+	margin-left: 10px;
+}
+.subrecipe-toggle::after {
+	font-style: italic;
+}
+.subrecipe .subrecipe-toggle::after {
+	content: "Show";
+}
+.subrecipe.open .subrecipe-toggle::after {
+	content: "Hide";
+}
+
 ul {
 	list-style-type: "- ";
 }
