Script for accordion

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="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í?
@@ -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>

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;
 		}
 	}

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");
+	});
+}