Add toggle functionality for competitors list and enhance styling

v2/actions.js

@@ -1,6 +1,7 @@
 document.querySelector("#register-pokemon").addEventListener("click", registerPokemon);
 document.querySelector("#edit-pokemon").addEventListener("click", editPokemon);
 document.querySelector("#delete-pokemon").addEventListener("click", deletePokemon);
+document.querySelector("#toggle-competitors").addEventListener("click", toggleCompetitors);
 
 function registerPokemon() {
   const name = prompt("Enter Pokémon name:");
@@ -102,3 +103,16 @@ function deletePokemon() {
       console.error("Error marking Pokémon as deleted:", error);
     });
 }
+
+function toggleCompetitors() {
+  const competitorsWrapper = document.querySelector("#competitors-wrapper");
+  const toggleButton = document.querySelector("#toggle-competitors");
+
+  if (competitorsWrapper.classList.contains("hidden")) {
+    competitorsWrapper.classList.remove("hidden");
+    toggleButton.textContent = "Hide";
+  } else {
+    competitorsWrapper.classList.add("hidden");
+    toggleButton.textContent = "Show";
+  }
+}

v2/index.html

@@ -122,8 +122,11 @@
       </section>
       <section class="competitors-list">
         <div class="container">
-          <h2>Competitors</h2>
+          <h2>
-          <div class="list-wrapper" id="competitors-wrapper">
+            Competitors
+            <button id="toggle-competitors" class="toggle-button">Hide</button>
+          </h2>
+          <div class="list-wrapper collapsible" id="competitors-wrapper">
             <!-- Competitors will be displayed here -->
           </div>
         </div>

v2/style.css

@@ -568,3 +568,27 @@ div#not-found-message {
   justify-content: center;
   gap: 10px;
 }
+
+.collapsible {
+  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+  overflow: hidden;
+}
+
+.collapsible.hidden {
+  max-height: 0;
+  opacity: 0;
+}
+
+.toggle-button {
+  background-color: var(--identity-primary);
+  color: var(--grayscale-white);
+  border: none;
+  border-radius: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: var(--body2-font-size);
+}
+
+.toggle-button:hover {
+  background-color: darken(var(--identity-primary), 10%);
+}