Add styling to club section and scripting to make it a collapsible list

Author: Souloutz

script.js

@@ -1,12 +1,13 @@
 const hobbies = document.getElementsByClassName("hobbies");
+const clubs = document.getElementsByClassName("clubs");
 const swenList = document.querySelector("ul.swen_list");
 var info = document.createElement("li");
 info.textContent = "Click here to add a new list item";
 swenList.appendChild(info);
 
 for (var index = 0; index < hobbies.length; index++) {
 	hobbies[index].addEventListener("click", async function() {
-		this.classList.toggle("active");
+		this.classList.toggle("hobbies_active");
 		var content = this.nextElementSibling;
 
 		if (content.style.maxHeight) {
@@ -19,6 +20,22 @@ for (var index = 0; index < hobbies.length; index++) {
 	});
 }
 
+for (var index = 0; index < clubs.length; index++) {
+	clubs[index].addEventListener("click", async function() {
+		this.classList.toggle("clubs_active");
+		var content = this.nextElementSibling;
+
+		if (content.style.maxHeight) {
+			content.style.maxHeight = null;
+		}
+
+		else {
+			content.style.maxHeight = content.scrollHeight + "px";
+		}
+	});
+}
+
+
 info.onclick = async function() {
 	const listItem = document.createElement("li");
 	const listContent = prompt("Enter a list item: ");

style.css

@@ -75,7 +75,7 @@ main > :not(hr), footer {
 .about_me img {
     float: right;
     border: 2px solid #333;
-    margin-left: 10px;
+    margin-left: 20px;
     margin-bottom: 30px;
     max-width: 20%;
     height: auto;
@@ -93,9 +93,10 @@ main > :not(hr), footer {
     content: '\002B  Hobbies';
     font-weight: bold;
     font-size: 22px;
+    margin-bottom: 0px;
 }
 
-.active:after {
+.hobbies_active:after {
     content: '\2212  Hobbies';
 }
 
@@ -111,6 +112,32 @@ main > :not(hr), footer {
     margin-right: 10%;
 }
 
+.clubs  {
+    background-color: transparent;
+    border-width: 0;
+    font-family: inherit;
+    font-style: inherit;
+    margin-left: 20px;
+    margin-top: 30px;
+}
+
+.clubs:after {
+    content: '\002B  Clubs';
+    font-weight: bold;
+    font-size: 22px;
+}
+
+.clubs_active:after {
+    content: '\2212  Clubs';
+}
+
+#clubs_content {
+    line-height: 25px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+}
+
 .schedule table {
     border: 2px solid black;
     background-color: rgb(211, 234, 250)