3 files changed, 39 insertions, 8 deletions
diff --git a/quotes/public/index.html b/quotes/public/index.html
index 6f7665c..32a46ec 100644
--- a/quotes/public/index.html
+++ b/quotes/public/index.html
@@ -26,7 +26,16 @@
                 </fieldset>
             </form>
 
-            <ul id="quotes"></ul>
+            <button id="open_TGI13.1">TGI13.1</button>
+            <ul style="display: none;" id="TGI13.1"></ul>
+            <button id="open_TGI13.2">TGI13.2</button>
+            <ul style="display: none;" id="TGI13.2"></ul>
+            <button id="open_TGM13.1">TGM13.1</button>
+            <ul style="display: none;" id="TGM13.1"></ul>
+            <button id="open_TGM13.2">TGM13.2</button>
+            <ul style="display: none;" id="TGM13.2"></ul>
+            <button id="open_TGTM13.1">TGTM13.1</button>
+            <ul style="display: none;" id="TGTM13.1"></ul>
         </div>
 
         <script src="script.js" charset="utf-8"></script>
diff --git a/quotes/public/script.js b/quotes/public/script.js
index 74f74df..2c112e4 100644
--- a/quotes/public/script.js
+++ b/quotes/public/script.js
@@ -1,5 +1,4 @@
 const dropdown = document.getElementById("author");
-const quotes = document.getElementById("quotes");
 
 dropdown.insertAdjacentHTML("beforeend", '<option selected="true" disabled>Author auswählen...</option>');
 
@@ -16,12 +15,14 @@ function appendOption(response) {
 
 function appendQuote(response) {
     response.forEach((elem) => {
-        quotes.insertAdjacentHTML(
-            "beforeend",
-            `<li>${elem["name"]} ${elem["middlename"] ? elem["middlename"] : " "}${elem["surname"]}: ${
-                elem["quote"]
-            }</li>`
-        );
+        document
+            .getElementById(elem["class"])
+            .insertAdjacentHTML(
+                "beforeend",
+                `<li>${elem["name"]} ${elem["middlename"] ? elem["middlename"] : " "}${elem["surname"]}: ${
+                    elem["quote"]
+                }</li>`
+            );
     });
 }
 
@@ -32,3 +33,12 @@ fetch("/auth/api/list")
 fetch("/quotes/api/list")
     .then((response) => response.json())
     .then((response) => appendQuote(response));
+
+const classes = ["TGI13.1", "TGI13.2", "TGM13.1", "TGM13.2", "TGTM13.1"];
+classes.forEach((clazz) => {
+    document.getElementById("open_" + clazz).addEventListener("click", () => {
+        const ul = document.getElementById(clazz);
+        if (ul.style.display === "none") ul.style.display = "block";
+        else ul.style.display = "none";
+    });
+});
diff --git a/quotes/public/style.css b/quotes/public/style.css
index 2c9c695..aac80ac 100644
--- a/quotes/public/style.css
+++ b/quotes/public/style.css
@@ -22,6 +22,18 @@ div {
     background: white;
 }
 
+button:not([type="submit"]) {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+}
+
 input,
 button,
 select {