CodePen Embed - Faq Accordion menu with Html css and javascript

<body>
	<h1 class="title">Cules Coding FAQ</h1>

	<div class="container">
		<div class="faq__section">
			<div class="question__header">
				<h3 class="question__title">lorem ipsum dolor sit amet</h3>

				<div class="close__section">
					<img src="https://raw.githubusercontent.com/thatanjan/projects-for-blogs/main/accordion-menu/media/expand-button.png?token=AQ6XI43YSDKKCDY7FJFNPHDBZXEQA" alt="" />
				</div>
			</div>

			<div class="answer__section">
				<p>
					Consectetur rerum quidem vitae deleniti facere vitae
					reprehenderit doloremque, deleniti quo fugit? Id magni
					cupiditate maiores iure quam? Quisquam reprehenderit
					laboriosam veritatis soluta quibusdam! Quas eos ipsa
					soluta eaque earum corporis. Asperiores ipsa rerum
					labore voluptatibus vero Tempore id accusantium
					assumenda itaque aliquam praesentium Sapiente ipsum quos
					distinctio laboriosam consectetur Dignissimos aut magnam
					nam eius reprehenderit? Id eligendi magni nihil
				</p>
				<p>
					Consectetur rerum quidem vitae deleniti facere vitae
					reprehenderit doloremque, deleniti quo fugit? Id magni
					cupiditate maiores iure quam? Quisquam reprehenderit
					laboriosam veritatis soluta quibusdam! Quas eos ipsa
					soluta eaque earum corporis. Asperiores ipsa rerum
					labore voluptatibus vero Tempore id accusantium
					assumenda itaque aliquam praesentium Sapiente ipsum quos
					distinctio laboriosam consectetur Dignissimos aut magnam
					nam eius reprehenderit? Id eligendi magni nihil
				</p>
			</div>
		</div>

		<div class="faq__section">
			<div class="question__header">
				<h3 class="question__title">
					ipsum dolor sit ametlorem ipsum dolor lorem ipsum
				</h3>

				<div class="close__section">
					<img src="https://raw.githubusercontent.com/thatanjan/projects-for-blogs/main/accordion-menu/media/expand-button.png?token=AQ6XI43YSDKKCDY7FJFNPHDBZXEQA" alt="" />
				</div>
			</div>

			<div class="answer__section">
				<p>
					Consectetur rerum quidem vitae deleniti facere vitae
					reprehenderit doloremque, deleniti quo fugit? Id magni
					cupiditate maiores iure quam? Quisquam reprehenderit
					laboriosam veritatis soluta quibusdam! Quas eos ipsa
					soluta eaque earum corporis. Asperiores ipsa rerum
					labore voluptatibus vero Tempore id accusantium
					assumenda itaque aliquam praesentium Sapiente ipsum quos
					distinctio laboriosam consectetur Dignissimos aut magnam
					nam eius reprehenderit? Id eligendi magni nihil
				</p>
			</div>
		</div>

		<div class="faq__section">
			<div class="question__header">
				<h3 class="question__title">lorem ipsum dolor sit amet</h3>

				<div class="close__section">
					<img src="https://raw.githubusercontent.com/thatanjan/projects-for-blogs/main/accordion-menu/media/expand-button.png?token=AQ6XI43YSDKKCDY7FJFNPHDBZXEQA" alt="" />
				</div>
			</div>

			<div class="answer__section">
				<p>
					Consectetur rerum quidem vitae deleniti facere vitae
					reprehenderit doloremque, deleniti quo fugit? Id magni
					cupiditate maiores iure quam? Quisquam reprehenderit
					laboriosam veritatis soluta quibusdam! Quas eos ipsa
					soluta eaque earum corporis. Asperiores ipsa rerum
					labore voluptatibus vero Tempore id accusantium
					assumenda itaque aliquam praesentium Sapiente ipsum quos
					distinctio laboriosam consectetur Dignissimos aut magnam
					nam eius reprehenderit? Id eligendi magni nihil
				</p>
			</div>
		</div>

		<div class="faq__section">
			<div class="question__header">
				<h3 class="question__title">lorem ipsum dolor sit amet</h3>

				<div class="close__section">
					<img src="https://raw.githubusercontent.com/thatanjan/projects-for-blogs/main/accordion-menu/media/expand-button.png?token=AQ6XI43YSDKKCDY7FJFNPHDBZXEQA" alt="" />
				</div>
			</div>

			<div class="answer__section">
				<p>
					Consectetur rerum quidem vitae deleniti facere vitae
					reprehenderit doloremque, deleniti quo fugit? Id magni
					cupiditate maiores iure quam? Quisquam reprehenderit
					laboriosam veritatis soluta quibusdam! Quas eos ipsa
					soluta eaque earum corporis. Asperiores ipsa rerum
					labore voluptatibus vero Tempore id accusantium
					assumenda itaque aliquam praesentium Sapiente ipsum quos
					distinctio laboriosam consectetur Dignissimos aut magnam
					nam eius reprehenderit? Id eligendi magni nihil
				</p>
			</div>
		</div>

		<div class="faq__section">
			<div class="question__header">
				<h3 class="question__title">lorem ipsum dolor sit amet</h3>

				<div class="close__section">
					<img src="https://raw.githubusercontent.com/thatanjan/projects-for-blogs/main/accordion-menu/media/expand-button.png?token=AQ6XI43YSDKKCDY7FJFNPHDBZXEQA" alt="" />
				</div>
			</div>

			<div class="answer__section">
				<p>
					Consectetur rerum quidem vitae deleniti facere vitae
					reprehenderit doloremque, deleniti quo fugit? Id magni
					cupiditate maiores iure quam? Quisquam reprehenderit
					laboriosam veritatis soluta quibusdam! Quas eos ipsa
					soluta eaque earum corporis. Asperiores ipsa rerum
					labore voluptatibus vero Tempore id accusantium
					assumenda itaque aliquam praesentium Sapiente ipsum quos
					distinctio laboriosam consectetur Dignissimos aut magnam
					nam eius reprehenderit? Id eligendi magni nihil
				</p>
			</div>
		</div>
	</div>
</body>

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Mohave:wght@700&family=Montserrat:wght@100;200;300;400;500;600;700&family=Nothing+You+Could+Do&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	letter-spacing: 1px;
	color: white;
}

body {
	background-color: #272727;
	font-family: "Montserrat", sans-serif;
	max-width: 100vw;
	overflow-x: hidden;
}

.faq__section {
	padding-bottom: 20px;
}

.title {
	text-align: center;
	font-size: 50px;
	padding: 100px 0;
}

.container {
	max-width: 700px;
	margin: auto;
}

.question__header {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 1rem 2rem;
	background-color: #ff4c00;
	border-radius: 20px;
}

.question__title {
	flex-grow: 1;
	padding-right: 1rem;
	font-weight: 500;
}

.close__section {
	margin-left: 2rem;
	transform: rotate(0deg);
	transition: all 0.3s ease-in-out;
}

.close__section img {
	width: 25px;
	height: auto;
}

.faq__section.active .close__section {
	transform: rotate(180deg);
}

.answer__section {
	line-height: 1.5;
	background: #171717;
	border-radius: 20px;
	max-height: 0;
	overflow: hidden;
	padding: 0rem 2rem;
	margin: 0;
	transition: max-height 0.2s ease-out, margin 0.2s ease-out;
}

.answer__section p {
	padding: 1rem 0;
}

.faq__section.active .answer__section {
	max-height: 700px;
	margin: 20px 0;
}

const faqSections = document.querySelectorAll(".faq__section");

faqSections.forEach((faqSection) => {
	faqSection.addEventListener("click", () => {
		faqSection.classList.toggle("active");
	});
});

This Pen is owned by Anjan Shomodder on CodePen.

See more by @thatanjan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.