side filter bar toggling

Author	Topic »
Six Robblees Starting Member 8 Posts	Posted - 12/29/2025 : 06:23:29 So after doing some extensive looking on the forum I am not finding a solution. There are plenty of posts about the side filter bar and people wanting it to show at the top of the products page as a clickable filters link that opens. While I know there is a top filter system already set in place, on mobile devices its just plain cumbersome when you have hundred of filters which pushes your products way down. In addition the side filter on mobile takes up a lot of real estate as well. I know things can be hidden with viewpoints. I am curious to know if anyone has come up with a viable solution to have it display in a more friendly manner like the way most all websites show. Here is an example of a popular website with a standard mobile filter display. https://www.etrailer.com/dept-pg-Trailer_Axles.aspx?srsltid=AfmBOoqTXPVHYhO8rVT_mAo-_OE506ZMlOTTJjTwmPDlp1VK2jby5c1s
Six Robblees Starting Member 8 Posts	Posted - 12/29/2025 : 10:05:34 Worked out the solution with some AI help - removes the side filter bar and does not require the top filter to be used. Keeps it nicely tucked together in a popup that is hidden until clicked, works with full screen down to mobile devices. You can choose to cleanup and add the css to your style sheet if you prefer but this is a good start for anyone that is interested in this Placed just before your <!-- #include file="vsadmin/inc/incproducts.asp"--> file <!-- Trigger Text --> <div class="menutop" id="openFilter" style="cursor: pointer;">Filter Results</div> <!-- Pop Container --> <dialog id="filterDialog" style="border:none; border-radius:8px; padding:20px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);"> <div style="text-align: right;"> <button id="closeFilter" style="cursor:pointer; background:none; border:none; font-weight:bold;">[X] Close</button> </div> <!-- Include File --> <div class="filter-content"> <!--#include file="vsadmin/inc/incsidefilter.asp"--> </div> </dialog> Then at the bottom of the page, just before the closing page tag <script> const filterModal = document.getElementById('filterDialog'); const openBtn = document.getElementById('openFilter'); const closeBtn = document.getElementById('closeFilter'); // Open the popup when "Filter Results" is clicked openBtn.addEventListener('click', () => { filterModal.showModal(); }); // Close the popup closeBtn.addEventListener('click', () => { filterModal.close(); }); // Optional: Close if user clicks outside the white box filterModal.addEventListener('click', (e) => { if (e.target === filterModal) filterModal.close(); }); </script>
	Topic »