More visually interesting open animations, close details on outside click

static/closable.js

@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", function () {
+	const closable = document.querySelectorAll("details.closable");
+
+	closable.forEach((detail) => {
+		detail.addEventListener("toggle", () => {
+			if (detail.open) setTargetDetail(detail);
+		});
+	});
+
+	function setTargetDetail(targetDetail) {
+		closable.forEach((detail) => {
+			if (detail !== targetDetail) {
+				detail.open = false;
+			}
+		});
+	}
+
+	document.addEventListener("click", function (event) {
+		const isClickInsideDetail = [...closable].some((detail) =>
+			detail.contains(event.target)
+		);
+
+		if (!isClickInsideDetail) {
+			closable.forEach((detail) => {
+				detail.open = false;
+			});
+		}
+	});
+});

static/details.js

@@ -1,18 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-	const nav = document.getElementById("site-nav");
-	const details = nav.querySelectorAll("details");
-
-	details.forEach((detail) => {
-		detail.addEventListener("toggle", () => {
-			if (detail.open) setTargetDetail(detail);
-		});
-	});
-
-	function setTargetDetail(targetDetail) {
-		details.forEach((detail) => {
-			if (detail !== targetDetail) {
-				detail.open = false;
-			}
-		});
-	}
-})