CSS FAQ Components

Simple FAQ component with a simple opening/closing effect. In case you don't want the animation, you can remove the javascript. It is there only, because of the animation.
<!--
stylify-variables
	color: '#FF5858'
/stylify-variables
-->
<section>
	<h2 class="text-align:center">Frequently Asked Questions</h2>
	<div class="display:flex flex-direction:column gap:24px">
		<figure class="margin:0 background:#fff padding:12px md:padding:24px border-radius:8px border:1px_solid_#eee">
			<details itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="
				[&[open]:not(.s-closing)>div]{max-height:200px}
				[&[open]:not(.s-closing)>summary_svg]{transform:rotate(-90deg)}
			">
				<summary itemprop="name" class="
					position:relative display:flex align-items:center justify-content:space-between font-size:16px sm:font-size:20px outline:none
					[&::marker]{content:^^} cursor:pointer
				">
					<strong>Lorem ipsum?</strong>
					<svg height="18" width="18" version="1.1" viewBox="0 0 185.343 185.343" class="transform:rotate(90deg) transition:.3s will-change:transform">
						<g>
							<path fill="#000" d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175    l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934    c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/>
						</g>
					</svg>
				</summary>
				<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="transition:.5s will-change:max-height max-height:0 overflow:hidden">
					<div itemprop="text" class="margin-top:12px font-size:16px">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis condimentum augue id magna semper rutrum. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
					</div>
				</div>
			</details>
		</figure>

		<figure class="margin:0 background:#fff padding:12px md:padding:24px border-radius:8px border:1px_solid_#eee">
			<details itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="
				[&[open]:not(.s-closing)>div]{max-height:200px}
				[&[open]:not(.s-closing)>summary_svg]{transform:rotate(90deg)}
			">
				<summary itemprop="name" class="
					position:relative display:flex align-items:center gap:12px font-size:16px sm:font-size:20px outline:none
					[&::marker]{content:^^} cursor:pointer
				">
					<svg height="18" width="18" version="1.1" viewBox="0 0 185.343 185.343" class="transition:.3s will-change:transform">
						<g>
							<path fill="#000" d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175    l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934    c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/>
						</g>
					</svg>
					<strong>Lorem ipsum?</strong>
				</summary>
				<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="transition:.5s will-change:max-height max-height:0 overflow:hidden">
					<div itemprop="text" class="margin-top:12px font-size:16px">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis condimentum augue id magna semper rutrum. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
					</div>
				</div>
			</details>
		</figure>

	</div>
</section>

<script>
// This javascript is necessary for the animation only.
// Closing animation without javascript doesn't work on details element
// because everything is hidden immediately.
document.addEventListener('click', (event) => {
	const clickedElement = event.target;

	if (!clickedElement.matches('summary') && !clickedElement.closest('summary')) {
		return;
	}

	const details = clickedElement.closest('details');

	if (!details.hasAttribute('open')) {
		return;
	}

	event.preventDefault();

	details.classList.add('s-closing');

	setTimeout(() => {
		details.removeAttribute('open');
		details.classList.remove('s-closing');
	// Time in timeout must be the same as for the transition on the answer
	}, 500);
});

</script>
<!--
stylify-variables
	color: '#FF5858'
/stylify-variables

stylify-components
	'faq-list': 'display:flex flex-direction:column gap:24px',
	'faq-list__item': 'margin:0 background:#fff padding:12px md:padding:24px border-radius:8px border:1px_solid_#eee',
	'faq-list__item-summary': `
		position:relative display:flex align-items:center font-size:16px gap:12px outline:none cursor:pointer
		sm:font-size:20px
		&::marker { content:^^ }
	`,
	'faq-list__item-summary-icon': 'transition:.3s will-change:transform',
	'faq-list__item-answer': 'transition:.5s will-change:max-height max-height:0 overflow:hidden',
	'faq-list__item-anwer-content': 'margin-top:12px font-size:16px'
/stylify-components
-->
<section>
	<h2 class="text-align:center">Frequently Asked Questions</h2>

	<div class="faq-list">
		<figure class="faq-list__item">
			<details itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="
				[&[open]:not(.s-closing)>div]{max-height:200px}
				[&[open]:not(.s-closing)>summary_svg]{transform:rotate(-90deg)}
			">
				<summary itemprop="name" class="
					position:relative display:flex align-items:center justify-content:space-between font-size:16px sm:font-size:20px outline:none
					[&::marker]{content:^^} cursor:pointer
				">
					<strong>Lorem ipsum dolor sit amet</strong>
					<svg height="18" width="18" version="1.1" viewBox="0 0 185.343 185.343" class="transform:rotate(90deg) faq-list__item-summary-icon">
						<g>
							<path fill="#000" d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175    l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934    c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/>
						</g>
					</svg>
				</summary>
				<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="faq-list__item-answer">
					<div itemprop="text" class="faq-list__item-anwer-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis condimentum augue id magna semper rutrum. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
					</div>
				</div>
			</details>
		</figure>

		<figure class="faq-list__item">
			<details itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="
				[&[open]:not(.s-closing)>div]{max-height:200px}
				[&[open]:not(.s-closing)>summary_svg]{transform:rotate(90deg)}
			">
				<summary itemprop="name" class="faq-list__item-summary">
					<svg height="18" width="18" version="1.1" viewBox="0 0 185.343 185.343" class="faq-list__item-summary-icon">
						<g>
							<path fill="#000" d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175    l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934    c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/>
						</g>
					</svg>
					<strong>Lorem ipsum dolor sit amet</strong>
				</summary>
				<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="faq-list__item-answer">
					<div itemprop="text" class="faq-list__item-anwer-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis condimentum augue id magna semper rutrum. Integer tempor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
					</div>
				</div>
			</details>
		</figure>
	</div>
</section>

<script>
// This javascript is necessary for the animation only.
// Closing animation without javascript doesn't work on details element
// because everything is hidden immediately.
document.addEventListener('click', (event) => {
	const clickedElement = event.target;

	if (!clickedElement.matches('summary') && !clickedElement.closest('summary')) {
		return;
	}

	const details = clickedElement.closest('details');

	if (!details.hasAttribute('open')) {
		return;
	}

	event.preventDefault();

	details.classList.add('s-closing');

	setTimeout(() => {
		details.removeAttribute('open');
		details.classList.remove('s-closing');
	// Time in this timeout must be the same as for the transition on the answer
	}, 500);
});

</script>