spell detail clickable indicator added

builder/index.html

@@ -1245,23 +1245,23 @@
                             <div class = "spell-display dark-5 rounded-bottom py-2 dark-shadow" id = "build-melee-stats" style="display: none;"></div>
                         </div>
                         <div class = "col">
-                            <div class="spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
                         </div>
                         <div class = "col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell0-infoAvg">spell1</div>
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">spell1</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
                         </div>
                         <div class = "col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell1-infoAvg">spell2</div>
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell1-infoAvg">spell2</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
                         </div>
                         <div class = "col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell2-infoAvg">spell3</div>
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell2-infoAvg">spell3</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
                         </div>
                         <div class = "col">
-                            <div class="spell-display spell-expand dark-5 rounded dark-shadow py-2 border border-dark" id="spell3-infoAvg">spell4</div>
+                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell3-infoAvg">spell4</div>
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
+                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
                         </div>
                         <div class = "col">
                             <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>

js/sq2display.js

@@ -1411,6 +1411,43 @@ function displaysq2SpellDamage(parent_elem, overallparent_elem, build, spell, sp
             part_divavg.append(overallaverageLabel);
         }
     }
+
+    //up and down arrow - done ugly
+
+
+
+    let down_arrow = document.createElement("img");
+    down_arrow.id = "down_arrow_" + overallparent_elem.id;
+    down_arrow.style.maxWidth = document.body.clientWidth > 900 ? "3rem" : "10rem";
+    down_arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_down.png";
+    overallparent_elem.appendChild(down_arrow);
+
+    let up_arrow = document.createElement("img");
+    up_arrow.id = "up_arrow_" + overallparent_elem.id;
+    up_arrow.style.maxWidth =  document.body.clientWidth > 900 ? "3rem" : "10rem";
+    up_arrow.src = "../media/icons/" + (newIcons ? "new" : "old") + "/toggle_up.png";
+    up_arrow.style.display = "none";
+    overallparent_elem.appendChild(up_arrow);
+
+    overallparent_elem.setAttribute("onclick", overallparent_elem.getAttribute("onclick") + `;toggleUpDownArrow("${overallparent_elem.id}")`);
+}
+
+function toggleUpDownArrow(parent_id) {
+    parent_elem = document.getElementById(parent_id);
+    if (parent_elem) {
+        let down_arrow = document.getElementById("down_arrow_" + parent_id);
+        if (down_arrow.style.display === "none") {
+            down_arrow.style.display = "";
+        } else {
+            down_arrow.style.display = "none";
+        }
+        let up_arrow = document.getElementById("up_arrow_" + parent_id);
+        if (up_arrow.style.display === "none") {
+            up_arrow.style.display = "";
+        } else {
+            up_arrow.style.display = "none";
+        }
+    }
 }
 
 function displaysq2EquipOrder(parent_elem, buildOrder){