Changing the color of the selected filter buttons

Site URL: https://pte.squarespace.com/ourwork

Hey! I am having trouble figuring out a way to change the color of the filter buttons depending on what the user selects. For Example, when they select the "Work" page, the user can see "All" of the work. I'd like to have the "All" button highlighted as white (as the default) until they click on "Client Projects" or "In-House Projects." Then when the filtered work is loaded on the page the selected button will stay white to tell the user what type of work they are viewing. Thanks in advance! (We have the business plan.)

On 10/27/2021 at 2:11 AM, pbueno24 said:

Site URL: https://pte.squarespace.com/ourwork

Hey! I am having trouble figuring out a way to change the color of the filter buttons depending on what the user selects. For Example, when they select the "Work" page, the user can see "All" of the work. I'd like to have the "All" button highlighted as white (as the default) until they click on "Client Projects" or "In-House Projects." Then when the filtered work is loaded on the page the selected button will stay white to tell the user what type of work they are viewing. Thanks in advance! (We have the business plan.)

My solution is adding a customized class to the active button and set style for it.

You can add to Home > Settings > Advanced > Code Injection, choose the footer

<script>
	(function(){
		/*set class for the active button*/
		document.addEventListener('DOMContentLoaded', function() {
			const currentPage = document.location.pathname;
			const currentBtns = document.querySelectorAll('#collection-614251ce615b993943a8acae .archive-group');
			const currentLink = currentPage.split('/').at(-1);
			currentBtns.forEach(btn => {
				const btnLink = btn.querySelector('a').getAttribute('href').split('/').at(-1);
				if(btnLink == currentLink) {
					btn.classList.add('btn--active');
				}
			})

		})
	})()
</script>
<style>
	/*style the active button*/
	.archive-group.btn--active {
	background: #fff;
	color: #000;
	}
</style>

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

Thank you bangank36!! It worked great. 

Although, would you be able to fix one thing?

Could you make it so that when a user selects the Work page, the white highlight defaults to the "All" filter? Right now when you select the Work page, nothing is highlighted. 

Thanks again.

On 10/28/2021 at 11:05 PM, pbueno24 said:

Thank you bangank36!! It worked great. 

Although, would you be able to fix one thing?

Could you make it so that when a user selects the Work page, the white highlight defaults to the "All" filter? Right now when you select the Work page, nothing is highlighted. 

Thanks again.

You mean

Clicking on Work on Header Navigation >> Highlight "All" filter?

Yes that is what I mean ^^

On 11/1/2021 at 10:56 PM, pbueno24 said:

Yes that is what I mean ^^

try change 

Quote

#collection-614251ce615b993943a8acae .archive-group

to

Quote

#collection-614251ce615b993943a8acae .archive-group, #collection-614251ce615b993943a8acae .header-nav-list