jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: improve spec and faq

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 22:05:40 +00:00
parent 208219ca2c
commit 7c5c7691c3
11 changed files with 109 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/FAQSection.astro
View File

@@ -53,11 +53,16 @@ const { items } = Astro.props;
</svg>
</button>
<div
class="hidden pb-6 text-gray-600 dark:text-gray-400
prose-spec spec-content"
class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"
data-faq-content
set:html={item.answer}
/>
>
<div class="overflow-hidden">
<div
class="pb-6 text-gray-600 dark:text-gray-400 prose-spec spec-content"
set:html={item.answer}
/>
</div>
</div>
</div>
))
}
@@ -80,33 +85,13 @@ const { items } = Astro.props;
trigger.addEventListener("click", () => {
const isExpanded = trigger.getAttribute("aria-expanded") === "true";
// Close all other items
items.forEach((otherItem) => {
if (otherItem !== item) {
const otherTrigger = otherItem.querySelector("[data-faq-trigger]");
const otherContent = otherItem.querySelector("[data-faq-content]");
const otherIcon = otherItem.querySelector("[data-faq-icon]");
otherTrigger?.setAttribute("aria-expanded", "false");
otherContent?.classList.add("hidden");
otherIcon?.classList.remove("rotate-180");
}
});
// Toggle current item
trigger.setAttribute("aria-expanded", isExpanded ? "false" : "true");
content.classList.toggle("hidden", isExpanded);
content.classList.toggle("grid-rows-[1fr]", !isExpanded);
content.classList.toggle("grid-rows-[0fr]", isExpanded);
icon.classList.toggle("rotate-180", !isExpanded);
});
});
// Open first item by default
const firstTrigger = items[0]?.querySelector(
"[data-faq-trigger]"
) as HTMLButtonElement;
if (firstTrigger) {
firstTrigger.click();
}
}
// Initialize on load