Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Project Template</title>

	<style type="text/css">
		body {
			margin-left: auto;
			margin-right: auto;
			max-width: 40em;
			width: 88%;
		}

		.accordion-content {
			display: none;
		}

		.accordion-active .accordion-content {
			display: block;
		}
	</style>
</head>
<body>

	<h1>Accordion</h1>

	<div class="accordion">
		<div class="accordion-item">
			<h2 class="accordion-title">Man-of-War</h2>
			<div class="accordion-content"><p>Prow clipper capstan grog poop deck. Hands man-of-war interloper measured fer yer chains no prey, no pay. Spanish Main dead men tell no tales hands spirits Pieces of Eight.</p></div>
		</div>

		<div class="accordion-item">
			<h2 class="accordion-title">Cutlass</h2>
			<div class="accordion-content"><p>Yard blow the man down execution dock broadside barque. Pressgang bilge hang the jib Spanish Main driver. Belay red ensign cutlass chantey trysail.</p></div>
		</div>

		<div class="accordion-item">
			<h2 class="accordion-title">Pirate Draft</h2>
			<div class="accordion-content"><p>Main sheet gunwalls tender Admiral of the Black Cat o'nine tails. Bring a spring upon her cable parrel gangplank pirate draft. Rutters bilge rat driver ballast swing the lead.</p></div>
		</div>
	</div>

	<script>
	// Initialize
	new Accordion();

	function Accordion() {

		this.accordion = document.querySelectorAll('.accordion-item');

		this.init = () => {
			this.toggleAccordion(this.accordion);
		}

		this.toggleAccordion = function(array) {
			array.forEach((element) => {
				element.addEventListener('click', () => {

					if(element.classList.contains('accordion-active')) {
						element.classList.remove('accordion-active');
						return;
					}

					this.removeActiveClass();

					element.classList.add('accordion-active');
				});
			});
		}

		this.removeActiveClass = function() {
			this.accordion.forEach((element) => {
				element.classList.remove('accordion-active');
			})
		}

	}

	var accordion = new Accordion();
	accordion.init();

	</script>

</body>
</html>