document.addEventListener("DOMContentLoaded", function () { const originalFilter = document.querySelector(".e-filter"); if (!originalFilter) return; const originalButtons = originalFilter.querySelectorAll(".e-filter-item"); // Verstecke das Original originalFilter.style.display = "none"; // Baue neues UI const wrapper = document.createElement("div"); wrapper.classList.add("e-filter-dropdown"); const toggle = document.createElement("div"); toggle.classList.add("e-filter-dropdown-toggle"); toggle.textContent = "Filter auswählen"; const menu = document.createElement("div"); menu.classList.add("e-filter-dropdown-menu"); // Neues Dropdown aufbauen originalButtons.forEach((btn) => { const clone = document.createElement("button"); clone.classList.add("e-filter-item"); clone.textContent = btn.textContent; if (btn.getAttribute("aria-pressed") === "true") { toggle.textContent = btn.textContent; clone.setAttribute("aria-pressed", "true"); } clone.addEventListener("click", () => { btn.click(); // ⬅️ TRIGGER ORIGINAL toggle.textContent = btn.textContent; // Optional: aria-pressed aktualisieren document.querySelectorAll(".e-filter-dropdown-menu .e-filter-item").forEach(el => { el.setAttribute("aria-pressed", "false"); }); clone.setAttribute("aria-pressed", "true"); wrapper.classList.remove("open"); }); menu.appendChild(clone); }); wrapper.appendChild(toggle); wrapper.appendChild(menu); originalFilter.parentNode.insertBefore(wrapper, originalFilter); // Toggle Dropdown toggle.addEventListener("click", () => { wrapper.classList.toggle("open"); }); // Klick außerhalb schließt Dropdown document.addEventListener("click", (e) => { if (!wrapper.contains(e.target)) { wrapper.classList.remove("open"); } }); });