From eb5ddfe4c3dfb227c1266d9ba20e926e44d74586 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Sat, 18 Feb 2023 12:00:57 +0100
Subject: [PATCH] Script for accordion

---
 index.html             | 11 ++++++-----
 sass/style.scss        | 13 ++++++++++++-
 static/js/accordion.js |  8 ++++++++
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 static/js/accordion.js

diff --git a/index.html b/index.html
index 6bdd66e..50d648a 100644
--- a/index.html
+++ b/index.html
@@ -99,7 +99,7 @@
 			<h1>FAQ</h1>
 			<div class="faq-list">
 				<div class="faq">
-					<div class="mark">+</div>
+					<div class="mark"></div>
 					<div>
 						<div class="question">
 							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
@@ -109,8 +109,8 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq active">
-					<div class="mark">+</div>
+				<div class="faq">
+					<div class="mark"></div>
 					<div>
 						<div class="question">
 							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
@@ -121,7 +121,7 @@
 					</div>
 				</div>
 				<div class="faq">
-					<div class="mark">+</div>
+					<div class="mark"></div>
 					<div>
 						<div class="question">
 							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
@@ -132,7 +132,7 @@
 					</div>
 				</div>
 				<div class="faq">
-					<div class="mark">+</div>
+					<div class="mark"></div>
 					<div>
 						<div class="question">
 							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
@@ -151,5 +151,6 @@
 		</footer>
 
 	<script type="text/javascript" src="/static/js/vanilla-tilt.js"></script>
+	<script type="text/javascript" src="/static/js/accordion.js"></script>
 	</body>
 </html>
diff --git a/sass/style.scss b/sass/style.scss
index 31d428a..21365b5 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -202,11 +202,21 @@ section {
 			.answer {
 				height: auto;
 				margin-top: 1em;
+				opacity: 1;
+			}
+
+			.mark:before {
+				content: "\2212";
 			}
 		}
 
-		.mark {
+		.mark:before {
+			content: "\002B";
+			display: block;
 			text-align: right;
+			color: #fff;
+			font-weight: bold;
+			font-size: 1.138rem;
 		}
 
 		.question {
@@ -216,6 +226,7 @@ section {
 		.answer {
 			height: 0;
 			overflow: hidden;
+			opacity: 0;
 			transition: all .5s ease;
 		}
 	}
diff --git a/static/js/accordion.js b/static/js/accordion.js
new file mode 100644
index 0000000..921cae0
--- /dev/null
+++ b/static/js/accordion.js
@@ -0,0 +1,8 @@
+var elements = Array.from(document.getElementsByClassName("faq"));
+var i;
+
+for (i = 0; i < elements.length; i++) {
+	elements[i].addEventListener("click", function() {
+		this.classList.toggle("active");
+	});
+}