Accordions with <details> and JS

by andyjh07

HTML

<script src="https://cdn.tailwindcss.com/"></script>
<section class="accordion-block py-24">
	<div class="container mx-auto">
		<div class="w-full mx-auto">
			<div class="space-y-6">
				<details class="p-4 rounded-lg bg-slate-50 shadow-md open:bg-emerald-50 open:shadow-lg group">
					<summary class="text-sm leading-6 font-semibold cursor-pointer list-none relative group-open:text-emerald-600">
						Accordion Title <span class="before:content-['\002B'] group-open:before:content-['\21B4']"></span>
					</summary>
					<div class="mt-3">
						<p class="text-emerald-900 text-sm leading-6">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium repellendus reprehenderit.
						</p>
					</div>
				</details>
				<details class="p-4 rounded-lg bg-slate-50 shadow-md open:bg-emerald-50 open:shadow-lg group">
					<summary class="text-sm leading-6 font-semibold cursor-pointer list-none relative group-open:text-emerald-600">
						Accordion Title <span class="before:content-['\002B'] group-open:before:content-['\21B4']"></span>
					</summary>
					<div class="mt-3">
						<p class="text-emerald-900 text-sm leading-6">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium repellendus reprehenderit.
						</p>
					</div>
				</details>
				<details class="p-4 rounded-lg bg-slate-50 shadow-md open:bg-emerald-50 open:shadow-lg group">
					<summary class="text-sm leading-6 font-semibold cursor-pointer list-none relative group-open:text-emerald-600">
						Accordion Title <span class="before:content-['\002B'] group-open:before:content-['\21B4']"></span>
					</summary>
					<div class="mt-3">
						<p class="text-emerald-900 text-sm leading-6">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium repellendus reprehenderit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam officiis deserunt blanditiis quam fugit sed commodi suscipit adipisci delectus nulla, dolores laboriosam dolor possimus...

JavaScript

/* Accordion functionality */
const details = document.querySelectorAll("details");

// Add the onclick listeners.
details.forEach((targetDetail) => {
  targetDetail.addEventListener("click", () => {
    // Close all the details that are not targetDetail.
    details.forEach((detail) => {
      if (detail !== targetDetail) {
        detail.removeAttribute("open");
      }
    });
  });
});