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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.