Put scenarios into animated accordion

questions.html

@@ -19,7 +19,16 @@
 
     <h1>Our Little Interview</h1>
 
-    <h2>The Who Questions</h2>
+    <nav>
+      <ul>
+        <li><a href="#who">The Who Questions</a></li>
+        <li><a href="#what">The What Questions</a></li>
+        <li><a href="#why">The Why Questions</a></li>
+        <li><a href="#how">The How Questions</a></li>
+      </ul>
+    </nav>
+    
+    <h2 id="who">The Who Questions</h2>
     <p>
       Welcome to the server! It seems like you're interested
       in becoming an official member, so before we accept you
@@ -50,7 +59,7 @@
       <input type="submit">
     </ul>
 
-    <h2>What Questions</h2>
+    <h2 id="what">The What Questions</h2>
     <p>
       Every server has rules, although our rules are a bit more
       straight forward than usual. This section tests your knowledge
@@ -64,7 +73,7 @@
       <li><em>Consider this a basic filter</em></li>
     </ul>
 
-    <h2>Why Questions</h2>
+    <h2 id="why">The Why Questions</h2>
     <p>
       Our server runs on a case by case basis, so naturally,
       instead of testing you on the rules of the land, it'd be
@@ -93,6 +102,22 @@
       developer or post to #feedback on Discord.
     </em>
   </p>
+  <h2 id="how">The How Questions</h2>
+  <p>
+    Congratulations! By filling out this form, you have been given
+    a few basic permissions. Feel free to roam around spawn, view
+    our dynamic map, join our discord channel, and discover our
+    custom coded Civilization View.
+    <br />
+    We'll let you know when the moderators have finished reviewing
+    your application. Till then, have fun!
+  </p>
+  <p id="application-status">Your application is awaiting approval</p>
+
+  <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
+  <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
+  <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
+  <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
 
   </body>
 </html>

resources/questions/scenarios.js

@@ -3,9 +3,17 @@ window.onload = function(){
   makeScenario = function(scenario){
 
     //output element, that other elements are attached to
-    let $outputElement = $("<li></li>")
-    $outputElement.attr("id", "scenarios-"+scenario.name);
-
+    let $trueOutputElement = $("<li></li>")
+    $trueOutputElement.attr("id", "scenarios-"+scenario.name);
+    let $outputElement = $("<div class=\"accordion-panel\"></div>")
+    //Determines whether this is a jQuery Accordion
+    const isAccordion = true;
+    if(isAccordion){
+      $controlElement = $("<button></button>");
+      $controlElement.addClass("accordion-control");
+      $controlElement.append(scenario.name);
+      $trueOutputElement.append($controlElement);
+    }
     //Mature Content rating
     if(scenario.adult == true){
       $adultText = $("<p>(question for those over the age of 18... or those mature enough)</p>");
@@ -69,12 +77,24 @@ window.onload = function(){
     $outputElement.append($("<br /><br />"));
     $outputElement.append($submitElement);
 
-    return $outputElement;
+    $trueOutputElement.append($outputElement);
+    return $trueOutputElement;
   }
 
   $.getJSON("./resources/questions/scenarios.json", "", function(data){
+    $accordionElement = $("#scenarios");
+    $accordionElement.addClass("accordion")
     for(const scenario of data.scenarios){
-      $("#scenarios").append(makeScenario(scenario));
+      $accordionElement.append(makeScenario(scenario))
     }
+
+    $(".accordion").on('click', '.accordion-control', function(e){
+      e.preventDefault;
+      $(this)
+        .next('.accordion-panel')
+        .not(':animated')
+        .slideToggle();
     });
+  });
+
 }

resources/questions/style.css

@@ -5,7 +5,13 @@ li, li p{
 .aside{
   color: rgb(250, 250, 250);
 }
+
+
 #scenarios li p.adult{
   font-family: monospace  ;
   color: rgb(240, 0, 100);
 }
+
+.accordion-panel {
+  display:none;
+}