put the 'Advanced' options in a collipsable card

and force displaying the card if it contain any invalid field

(thus user does not get confused if submit fails because of an invalid
 value in the non-displayed tab)

django/allgo/templates/webapp_add_update.html

@@ -23,20 +23,9 @@
 {% block content %}
 <div class="container">
   <div class="allgo-page">
-
-        <ul class="nav nav-tabs">
-          <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#basic">Basic</a></li>
-          <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#advanced"><i class="fas fa-cogs"></i> Advanced</a></li>
-        </ul>
-
-        <p class="mt-3">You can create a new application here by giving a name.</p>
-
         <form method="post" class="clearfix">
           {% csrf_token %}
 
-          <div class="tab-content">
-            <div class="tab-pane active" id="basic">
-
               <div class="form-row">
                 <div class="col">
                   <div class="form-group">
@@ -84,10 +73,16 @@
                   <small class="form-text text-muted">{{ form.private.help_text }}</small>
               </div>
 
-            </div>
-
-          <div class="tab-pane" id="advanced">
-
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">
+            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
+              Advanced options
+            </button>
+          </h5>
+        </div>
+        <div class="collapse" id="collapseAdvanced">
+          <div class="card-body">
             <div class="form-row">
 
               <div class="form-group col">
@@ -149,12 +144,14 @@
 
             </div>
           </div>
+        </div>
+      </div>
 
           {% url 'main:webapp_creation' as webapp_url %}
           {% if request.get_full_path == webapp_url %}
-          <input class="btn btn-primary float-right" type="submit" value="Create webapp">
+          <input class="btn btn-primary float-right mt-4" type="submit" value="Create webapp">
           {% else %}
-          <input class="btn btn-primary float-right" type="submit" value="Update webapp">
+          <input class="btn btn-primary float-right mt-4" type="submit" value="Update webapp">
           {% endif %}
 
         </form>
@@ -168,3 +165,14 @@
 {{ block.super }}
 {% include 'partials/_form_messages.html' %}
 {% endblock %}
+
+{% block javascript %}
+{{ block.super }}
+<script>
+  $("#collapseAdvanced input").on("invalid", function(ev) {
+    {# unfold the 'Advanced options' panel if any of its field triggers an 'invalid' value event #}
+    $(ev.target).closest(".collapse").collapse("show")
+  });
+</script>
+{% endblock %}
+