mariomelchor/Accordion

## Accordion
<!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>
		// Class for Accordion
		class Accordion {
			constructor() {
				this.accordion = document.querySelectorAll('.accordion-item');
				this.toggleAccordion(this.accordion);
			}

			toggleAccordion(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');
					});
				});
			}

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

		// Initialize
		new Accordion();

	</script>

</body>
</html>
	<!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>
	// Class for Accordion
	class Accordion {
	constructor() {
	this.accordion = document.querySelectorAll('.accordion-item');
	this.toggleAccordion(this.accordion);
	}

	toggleAccordion(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');
	});
	});
	}

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

	// Initialize
	new Accordion();

	</script>

	</body>
	</html>