```javascript document.addEventListener("DOMContentLoaded", function () { // Ensure Directorist categories are fully loaded setTimeout(() => { const categoryWrapper = document.querySelector('.taxonomy-category-wrapper'); if (!categoryWrapper) return; // Step 1: Gather all category links, including subcategories const categoryLinks = categoryWrapper.querySelectorAll( 'a.directorist-taxonomy-list__card, .directorist-taxonomy-list__sub-item a' ); // Step 2: Set up a container for the custom checkboxes const customContainer = document.createElement('div'); customContainer.classList.add('custom-checkbox-container'); customContainer.style.marginTop = '15px'; // Step 3: Transform each category link into a checkbox categoryLinks.forEach(link => { const label = document.createElement('label'); label.classList.add('checkbox-label'); const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.value = link.href; checkbox.id = 'checkbox-' + Math.random().toString(36).substr(2, 9); // Extract the category name, removing any count and spaces const categoryName = link .querySelector('.directorist-taxonomy-list__name') ?.textContent.replace(/\(.*\)/g, '') .trim() || link.textContent.trim(); const span = document.createElement('span'); span.textContent = categoryName; label.appendChild(checkbox); label.appendChild(span); // Position "All" category at the top if (categoryName.toLowerCase() === 'all') { customContainer.prepend(label); } else { customContainer.appendChild(label); } }); // Step 4: Swap the original category section with the new checkboxes categoryWrapper.innerHTML = ''; categoryWrapper.appendChild(customContainer); // Step 5: Implement radio-like functionality (only one checkbox can be checked) customContainer.addEventListener('change', (e) => { const clicked = e.target; if (clicked.type === 'checkbox') { const allCheckboxes = customContainer.querySelectorAll('input[type="checkbox"]'); allCheckboxes.forEach(cb => { if (cb !== clicked) cb.checked = false; }); // Step 6: Navigate to the category link upon selection if (clicked.checked) { const targetUrl = clicked.value; window.location.href = targetUrl; } } }); }, 1000); // Wait 1 second for Directorist JavaScript to complete rendering }); // CSS for custom checkbox container .custom-checkbox-container { display: flex; flex-direction: column; gap: 8px; } .checkbox-label { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 15px; } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0073aa; } .directorist-col-4.directorist-taxonomy-list-one, .listing-with-sidebar__searchform { display: none; } ```