diff --git a/src/common/commonStyling.css b/src/common/commonStyling.css
index a8a8ddf..3c29841 100644
--- a/src/common/commonStyling.css
+++ b/src/common/commonStyling.css
@@ -70,6 +70,14 @@ kbd {
        the text would be selected otherwise due to a double click. */
     -webkit-user-select: none;
     user-select: none;
+
+    /* Default orientation of the arrow: pointing down */
+    --arrow-scale: 1;
+}
+
+.accordion-button.flip-arrow {
+    /* Default orientation of the arrow: pointing up */
+    --arrow-scale: -1;
 }
 
 .accordion-button::after {
@@ -88,10 +96,10 @@ kbd {
 
     vertical-align: text-top;
     transition: transform 500ms ease;
-    transform: scaleY(1);
+    transform: scaleY(var(--arrow-scale));
 }
 
 .accordion-state:checked ~ label .accordion-button::after {
     /* flip arrow in y direction */
-    transform: scaleY(-1);
+    transform: scaleY(calc(var(--arrow-scale) * -1));
 }
diff --git a/src/common/helpUi.ts b/src/common/helpUi.ts
index b90ddc4..d21f413 100644
--- a/src/common/helpUi.ts
+++ b/src/common/helpUi.ts
@@ -20,7 +20,7 @@ export class HelpUI extends AbstractUIExtension {
         containerElement.innerHTML = `
             <input type="checkbox" id="accordion-state-help" class="accordion-state" hidden>
             <label id="help-ui-accordion-label" for="accordion-state-help">
-                <div class="accordion-button">
+                <div class="accordion-button flip-arrow">
                     Keyboard Shortcuts | Help
                 </div>
             </label>