// HTML Markup

// <div class="accordion">First</div>
// <p class="accordtion_text">Lorem 1</p>
// <div class="accordion">Second</div>
// <p class="accordtion_text">Lorem 2</p>
// <div class="accordion">Third</div>
// <p class="accordtion_text">Lorem 3</p>

// CSS Styles

// .accordion {
// 	width: 100%;
// 	padding: 10px;
// 	font-size: 20px;
// 	background-color: #eee;
// 	margin-bottom: 5px;
// }
// .accordtion_text {
// 	display: none;
// 	padding: 10px;
// 	font-size: 16px;
// 	animation-name: fade;
// 	animation-duration: 0.5s;
// }
// @keyframes fade {
// 	from{opacity: 0.1}
// 	to{opacity: 1}
// }
// .accordtion_text.show {
// 	display: block;
// }

// JS Code

let acc = document.getElementsByClassName("accordion");
let i;
for (i = 0; i < acc.length; i++) {
	acc[i].onclick = function () {
		this.classList.toggle("active");
		this.nextElementSibling.classList.toggle("show");
	};
};