test collapsing category

views/DE/project/projectList.pug

@@ -26,6 +26,24 @@ html(lang="de")
             height: 15vw;
             object-fit: cover;
         }
+
+        .collapsing {
+            color: red;
+            position: absolute !important;
+            z-index: 20;
+            width: 100%;
+            top: 50px;
+        }
+        .collapse.in {
+            display: block;
+            position: absolute;
+            z-index: 20;
+            width: 100%;
+            top: 50px;
+        }
+        .navbar-collapse {
+            max-height: none !important;
+        }
   body
     div(class="container")
         div(class="pt-4 pb-4 form-row")
@@ -33,8 +51,31 @@ html(lang="de")
                 //input(id="searchInput", class="form-control form-control-dark w-100", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
                 input(id="searchInput", class="form-control", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
             div(class="form-group col-md-2")
-                select(class="form-control")
+                //select(class="form-control")
                     option uncategorized
+                button(class="btn btn-secondary", type="button", data-toggle="collapse", data-target="#collapseCategory", aria-expanded="false", aria-controls="collapseCategory") Category
+                div(class="collapse", id="collapseCategory")
+                    div(class="form-check")
+                        input(class="form-check-input", type="checkbox", value="", id="1")
+                        label(class="form-check-label", for="defaultCheck1")
+                            Default All
+                    div(class="form-check")
+                        input(class="form-check-input", type="checkbox", value="", id="2")
+                        label(class="form-check-label", for="defaultCheck2")
+                            Disabled Architecture
+                    div(class="form-check")
+                        input(class="form-check-input", type="checkbox", value="", id="3")
+                        label(class="form-check-label", for="defaultCheck2")
+                            Disabled Business Psychologie
+                    div(class="form-check")
+                        input(class="form-check-input", type="checkbox", value="", id="4")
+                        label(class="form-check-label", for="defaultCheck2")
+                            Disabled Computer Science
+                    div(class="form-check")
+                        input(class="form-check-input", type="checkbox", value="", id="5")
+                        label(class="form-check-label", for="defaultCheck2")
+                            Disabled Uncategorized
+
         h3(class="mb-3 font-weight-bold") Projektinformationen
         p(class="font-italic") Hier finden Sie Informationen zu den bei uns gehosteten Projekten, wie z.B. Projektbeschreibungen, Projektwebseiten, Visualisierungen, Demonstrationen.