Accordion

About this module

An accessible accordion with smooth height animation, plus/minus indicators and full keyboard support.

Installation

1. 1

   Create the files

   Create `index.html`, `style.css` and (if listed) `script.js` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <div class="mh-accordion">
     <div class="mh-item">
       <button class="mh-head" aria-expanded="false" aria-controls="a-1">
         <span>What is ModuleHarbor?</span><span class="mh-plus">+</span>
       </button>
       <div class="mh-body" id="a-1"><p>A library of production-ready modules you can copy into your projects.</p></div>
     </div>
     <div class="mh-item">
       <button class="mh-head" aria-expanded="false" aria-controls="a-2">
         <span>Is it free?</span><span class="mh-plus">+</span>
       </button>
       <div class="mh-body" id="a-2"><p>Yes — every module is MIT licensed and free to use.</p></div>
     </div>
   </div>

2. 2

   Wire up the script

   Include `script.js` before the closing body tag.

   document.querySelectorAll(".mh-head").forEach((btn) => {
     btn.addEventListener("click", () => {
       const body = document.getElementById(btn.getAttribute("aria-controls"));
       const open = btn.getAttribute("aria-expanded") === "true";
       btn.setAttribute("aria-expanded", String(!open));
       body.style.height = open ? "0px" : body.scrollHeight + "px";
     });
   });