diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs
index fe075c48..f46b3ba8 100755
--- a/src/web/HTMLOperation.mjs
+++ b/src/web/HTMLOperation.mjs
@@ -83,6 +83,7 @@ class HTMLOperation {
pause
not_interested
+ keyboard_arrow_up
`;
diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
index e1e07dfd..64dc3a35 100755
--- a/src/web/Manager.mjs
+++ b/src/web/Manager.mjs
@@ -135,6 +135,7 @@ class Manager {
// Recipe
this.addDynamicListener(".arg:not(select)", "input", this.recipe.ingChange, this.recipe);
this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe);
+ this.addDynamicListener(".hide-options", "click", this.recipe.hideOptClick, this.recipe);
this.addDynamicListener(".disable-icon", "click", this.recipe.disableClick, this.recipe);
this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe);
this.addDynamicListener("#rec-list li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index ba0e7b11..afa3e72b 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -214,6 +214,30 @@ class RecipeWaiter {
window.dispatchEvent(this.manager.statechange);
}
+ /**
+ * Handler for hide-opt click events.
+ * Updates the icon status.
+ *
+ * @fires Manager#statechange
+ * @param {event} e
+ */
+ hideOptClick(e) {
+ const icon = e.target;
+
+ if (icon.getAttribute("hide-opt") === "false") {
+ icon.setAttribute("hide-opt", "true");
+ icon.innerText = "keyboard_arrow_down";
+ icon.classList.add("hide-options-selected");
+ icon.parentNode.previousElementSibling.style.display = "none";
+ } else {
+ icon.setAttribute("hide-opt", "false");
+ icon.innerText = "keyboard_arrow_up";
+ icon.classList.remove("hide-options-selected");
+ icon.parentNode.previousElementSibling.style.display = "grid";
+ }
+
+ window.dispatchEvent(this.manager.statechange);
+ }
/**
* Handler for disable click events.