Dynamic forms on create page

web/app/templates/base.html

@@ -111,16 +111,16 @@
     </footer>
     <!-- JavaScript -->
     <!-- jQuery first, then Popper JS, then Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
     <script>
-        $("#resource_type").change(function() {
-            var resource_type = $(this).val();
-            $(".resource_type_input").hide("fast", function() {
-                $("#resource_type_" + resource_type).show("slow");
-            });
+    $("#resource_type").change(function() {
+        var resource_type = $(this).val();
+        $(".resource_type_input").hide("fast", function() {
+            $("#resource_type_" + resource_type).show("slow");
         });
+    });
     </script>
 </body>
 

web/app/templates/create.html

@@ -12,7 +12,7 @@
                   <option value="practice">Practice</option>
               </select>
             </div>
-            <div id="resource_type_Tool" class="resource_type_input">
+            <div id="resource_type_tool" class="resource_type_input" style="display: none;">
             <div class="mb-3 mt-3">
                 <label for="name">Tool name</label>
                 <input class="form-control" type="text" name="name" placeholder="Tool name" autofocus="">
@@ -23,7 +23,7 @@
                 <textarea class="form-control" rows="4" type="text" name="description" placeholder="Tool description" autofocus=""></textarea>
             </div>
             </div>
-            <div id="resource_type_Example" class="resource_type_input">
+            <div id="resource_type_example" class="resource_type_input" style="display: none;">
             <div class="mb-3 mt-3">
                 <label for="name">Example name</label>
                 <input class="form-control" type="text" name="name" placeholder="Example name" autofocus="">