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

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 file








Then at the bottom of the page, just before the closing page tag

To expand on this, with the original code when a selection was made and the page refreshed it would close the filter. This revised code keeps the filter box open until user clicks close so when selections are made it stays on top.

Again this bit is inserted just before your incproducts.asp line

<div class="menutop" id="openFilter" style="cursor: pointer; text-transform:uppercase; font-weight:bold;">
Click Here to 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>





And the bit at the bottom just before the page close tag

<script>
const filterModal = document.getElementById('filterDialog');
const openBtn = document.getElementById('openFilter');
const closeBtn = document.getElementById('closeFilter');

// NEW: Check if the filter was open before the page refreshed
if (localStorage.getItem('filterDialogOpen') === 'true') {
filterModal.showModal();
}

// Open the popup and save the state
openBtn.addEventListener('click', () => {
filterModal.showModal();
localStorage.setItem('filterDialogOpen', 'true');
});

// Close the popup and clear the state
closeBtn.addEventListener('click', () => {
filterModal.close();
localStorage.removeItem('filterDialogOpen');
});

// NEW: Also clear the state if the user presses 'Esc' to close the dialog
filterModal.addEventListener('cancel', () => {
localStorage.removeItem('filterDialogOpen');
});
</script>

Finally got around to separating the CSS out Here is the final release 3 simple steps

Step 1 - in products.asp - Add this snippet just before the file <!-- #include file="vsadmin/inc/incproducts.asp"-->

<!-- Trigger Text -->
<div id="openFilter" class="filter-button">
Click Here to Filter Results
</div>
<!-- Pop Container -->
<dialog id="filterDialog" class="custom-dialog">
<div style="text-align: right;">
<button id="closeFilter" class="close-btn">[X] Close</button>
</div>
<!-- Include File -->
<div class="filter-content">
<!--#include file="vsadmin/inc/incsidefilter.asp"-->
</div>
</dialog>


Step 2 - just before your page close tag add

<script>
const filterModal = document.getElementById('filterDialog');
const openBtn = document.getElementById('openFilter');
const closeBtn = document.getElementById('closeFilter');

// NEW: Check if the filter was open before the page refreshed
if (localStorage.getItem('filterDialogOpen') === 'true') {
filterModal.showModal();
}

// Open the popup and save the state
openBtn.addEventListener('click', () => {
filterModal.showModal();
localStorage.setItem('filterDialogOpen', 'true');
});

// Close the popup and clear the state
closeBtn.addEventListener('click', () => {
filterModal.close();
localStorage.removeItem('filterDialogOpen');
});

// NEW: Also clear the state if the user presses 'Esc' to close the dialog
filterModal.addEventListener('cancel', () => {
localStorage.removeItem('filterDialogOpen');
});
</script>


Step 3 - Add the CSS to the stylesheet

.custom-dialog {
border: none;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
width: 30%;
}
.close-btn {
cursor: pointer;
background: none;
border: none;
font-weight: bold;
background-color:#000;
color:#fff;
}
.filter-button {
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
text-align:center;
}
#openFilter {
background-color: #FF0000;
color: #fff;
padding: 10px;
cursor: pointer;
}

#openFilter:hover {
color: #FFF;
background-color: #000;
text-decoration: underline;
}


Enjoy!