Jump to content

Changing the color of the selected filter buttons

Recommended Posts

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.)

482010394_Screenshot(3).png.d82aa2c0205e2ce7d96b1941abf4b4e5.png

Link to comment
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.)

482010394_Screenshot(3).png.d82aa2c0205e2ce7d96b1941abf4b4e5.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.