Gaga Mortise Handles (Zinc)

document.addEventListener('click', function(e){ const btn = e.target.closest('.faq-question'); if(!btn) return; const item = btn.closest('.faq-item'); const wrapper = item.closest('.faq-wrapper'); // Close all other items wrapper.querySelectorAll('.faq-item').forEach(i => { if (i !== item) i.classList.remove('open'); }); // Toggle current item item.classList.toggle('open'); }); jQuery(document).ready(function ($) { function hideVariationsAndPrices() { // Hide variation dropdowns & price elements inside product grid $('.products .product').each(function () { $(this).find('.variations_form, .woocommerce-variation, .woocommerce-variation-add-to-cart').hide(); $(this).find('.price, .woocommerce-Price-amount, .amount').hide(); }); } // Run once after filter AJAX completes $(document).ajaxComplete(function (event, xhr, settings) { // Check if AJAX request belongs to Woo filter if (settings.url && settings.url.includes('woo_filter_products')) { hideVariationsAndPrices(); } }); // Also run manually when dropdown changes $(document).on('change', '.woo-filter-category, .subcategory-filter', function () { setTimeout(hideVariationsAndPrices, 600); }); }); .product-faq-section { margin: 40px 0; width: 100%; } .faq-heading { font-size: 1.6rem; margin-bottom: 20px; text-align: left; } .faq-wrapper { width: 100%; max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid #ddd; padding: 10px 0; } .faq-question { width: 100%; background: none; border: none; text-align: left; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; padding: 10px 0; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; } .faq-item.open .faq-answer { max-height: 500px; opacity: 1; } .faq-answer p { margin: 10px 0 0; color: #555; line-height: 1.6; } .faq-icon { font-weight: bold; transition: transform 0.3s; font-size: 1.2rem; } .faq-item.open .faq-icon { transform: rotate(45deg); } /* Responsive tweaks */ @media (max-width: 768px) { .faq-heading { font-size: 1.4rem; } .faq-question { font-size: 0.95rem; } }