From 4359d6dd4a2c093c1e72db5b5b3f2e6658107638 Mon Sep 17 00:00:00 2001
From: kfrn <knfrances@gmail.com>
Date: Tue, 17 Dec 2019 22:49:06 +1300
Subject: [PATCH] Update 'show/hide recipes' (expand/collapse) functionality

Previously, it would expand the recipe if currently collapsed, and vice versa.
Now, if any recipes are currently expanded, it will collapse all; otherwise, all recipes will be expanded.

The 'expand all' functionality is necessary for full-text searching.
---
 index.html |  2 +-
 js/js.js   | 22 ++++++++++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index c193ca3..3cf4b3c 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
   <nav class="sidebar well">
     <h2 class="heading">Table of Contents</h2>
     <a href="#about"><div class="contents-list">About this resource</div></a>
-    <div id="open-all" class="contents-list">Show/hide all recipes</div>
+    <div id="toggle-expand-collapse-all" class="contents-list">Expand/collapse all recipes</div>
     <a href="#basics"><div class="contents-list">FFmpeg basics</div></a>
     <a href="#concepts"><div class="contents-list">Advanced FFmpeg concepts</div></a>
     <a href="#rewrap"><div class="contents-list">Change container (rewrap)</div></a>
diff --git a/js/js.js b/js/js.js
index dd386b5..27c3795 100644
--- a/js/js.js
+++ b/js/js.js
@@ -32,11 +32,21 @@ $(document).ready(function() {
     }
   })
 
-  // open all windows if button is clicked
-  $('#open-all').on("click", function(){
-    $('input[type=checkbox]').each(function(){
-      this.checked = !this.checked;
-    })
-  });
+  // Collapse all recipes when button is clicked
+  $('#toggle-expand-collapse-all').on("click", function(){
+    var checkboxes = $('input[type=checkbox]');
+    var anyRecipesOpen = $(checkboxes).is(':checked');
 
+    if (anyRecipesOpen) {
+      // Collapse all
+      $('input[type=checkbox]').each(function() {
+        this.checked = false;
+      });
+    } else new Promise(function(resolve, reject) {
+      // Expand all
+      $('input[type=checkbox]').each(function() {
+        this.checked = true;
+      });
+    });
+  });
 });