From 3f116860ae2d2c43073f487eaec9540f6521cc30 Mon Sep 17 00:00:00 2001
From: atteggiani <davide.marchegiani@gmail.com>
Date: Sun, 3 Sep 2023 11:46:56 +1000
Subject: [PATCH] Minor changes to animated terminal toggler

---
 docs/getting_started/are.md              | 24 ++++++++++++++++++++++++
 docs/js/miscellaneous.js                 |  9 ++++++---
 docs/models/run-a-model/run-access-cm.md | 13 ++++++++++++-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/docs/getting_started/are.md b/docs/getting_started/are.md
index e69de29bb..f7471389c 100644
--- a/docs/getting_started/are.md
+++ b/docs/getting_started/are.md
@@ -0,0 +1,24 @@
+# Australian Research Environment (ARE)
+
+<a href="https://are-auth.nci.org.au/" target="_blank">ARE</a> is a web-based graphical interface for performing your computational research, provided by <a href="https://nci.org.au/" target="_blank">NCI</a>.
+<br>
+ARE can give you access to NCI’s <i>Gadi</i> supercomputer and data collections.
+
+
+There are three main applications included in ARE: <a href="#vdi">Virtual Desktop (VDI)</a>, <a href="#jupyterlab">JupyterLab</a>, <a href="#gadi-terminal">Gadi Terminal</a>.
+
+<!-- Tab labels -->
+<div class="tabLabels" label="are-apps">
+    <button id="vdi">Virtual Desktop (VDI)</i></button>
+    <button id="jupyterlab"><i>JupyterLab</i></button>
+    <button id="gadi-terminal"><i>Gadi Terminal</i></button>
+</div>
+
+
+<br>
+<h6>References</h6>
+<ul class="references">
+    <li>
+        <a href = "https://opus.nci.org.au/display/Help/ARE+User+Guide" target="_blank">https://opus.nci.org.au/display/Help/ARE+User+Guide</a>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/docs/js/miscellaneous.js b/docs/js/miscellaneous.js
index 3c8e3dc1c..4cba90061 100644
--- a/docs/js/miscellaneous.js
+++ b/docs/js/miscellaneous.js
@@ -172,9 +172,12 @@ function toggleTerminalAnimations() {
     let onclick = state == 'active' ? 'disable' : 'enable';
     terminalAnimationsSwitch.setAttribute('title',`Terminal animations ${current}.\nClick to ${onclick} them.`);
     terminalAnimationsSwitch.setAttribute('id','terminalSwitch');
-    let h1 = document.querySelector('h1');
-    h1.parentElement.insertBefore(terminalAnimationsSwitch, h1);
-    terminalAnimationsSwitch.addEventListener('click', toggleState, false);
+    document.querySelectorAll('h1').forEach(h1 => {
+      let _switch = terminalAnimationsSwitch.cloneNode(true);
+      _switch.addEventListener('click', toggleState, false);
+      h1.parentElement.insertBefore(_switch, h1);
+    })
+    terminalAnimationsSwitch.remove();
   }
 }
 
diff --git a/docs/models/run-a-model/run-access-cm.md b/docs/models/run-a-model/run-access-cm.md
index 57edeb9c6..95c08bc29 100644
--- a/docs/models/run-a-model/run-access-cm.md
+++ b/docs/models/run-a-model/run-access-cm.md
@@ -4,8 +4,19 @@
     <button id="are">ARE / <i>Gadi workflow</i></button>
     <button id="accessdev"><i>accessdev workflow</i></button>
 </div>
+<!-- Tab content -->
+<div class="tabContents" label="workflow">
+    <!-- ARE/Gadi-->
+    <div>
+        <h1>Run {{ model }} from ARE / <i>Gadi</i></h1>
+    </div>
+    <!-- accessdev -->
+    <div>     
+        <h1>Run {{ model }} from <i>accessdev</i></h1>
+    </div>
+</div>
+<!-- End of tab content -->
 
-# Run {{ model }}
 <div class="note">
     The workflow to run ACCESS_CM is currently in transition from <i>accessdev</i> to ARE/<i>Gadi</i>.
     <br>