How to add Category tab buttons to filter within Summary block

Site URL: https://www.drstephaniemoody.com/health-wellness

Hi,

I I'm struggling to find out how to create a set of visible sub-category buttons within a summary block page, and I found the exact example -->  https://www.drstephaniemoody.com/health-wellness

This website is also created by using Squarespace, and I'm curious how they added the category buttons that filters out the blocks. I have tried this by adding a text-section like this, linking each text-button :

But the problem here is that when I click one of the linked buttons, the page refreshes.. Should I have to add a customized CSS to create this using Isotope?  At first this seemed like a pretty easy problem to solve, but surprisingly I couldn't find a single solution to this til now.. Please Help! Thank you so much in advance.

I'm hearing a lot about the Universal Filter, but I can't afford the price, would be appreciated if you could refrain from suggesting the item! Thanks.

Hi. They used Square Studio Tab Plugin.  (There is a lot of complaints about Square Studio Support)

Try Accordion Tabs Plugin by sqspthemes

or Tabs by Will Myers ($10)

Dear @tuanphan, can you please also explain how the filter was designed on this site: https://www.cecelinatornberg.co.uk/work

Is this based on a blog, a portfolio or just a collection of normal sites? I like that the whole page does not refresh while filtering and I love the simplicity of the font without any tabs.

Thanks in advance!

I would love to know how the filter works on this website too https://www.cecelinatornberg.co.uk/work. I have been struggling on finding a way to make it work the whole evening. 

@ChristinaSimon @YenY

If you're a JavaScript developer you can use the Isotope library. There's a screenshot below showing how effective it is!

If you're not a developer, @michaeleparkour has built a superb paid plugin callled Universal Filter that is specific to Squarespace and encapsulates this functionality, and many other features!

Did this help? Please give feedback by clicking an icon below  ⬇️

On 1/19/2023 at 4:41 PM, paul2009 said:

@ChristinaSimon @YenY

If you're a JavaScript developer you can use the Isotope library. If you're not a developer, @michaeleparkour has built the Universal Filter plugin, available from Squarewebsites.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks, @paul2009! I‘ll look into the plugin 👍🏻 

On 1/20/2023 at 4:41 AM, paul2009 said:

 

Did this help? Please give feedback by clicking an icon below  ⬇️

Hey @paul2009 is there a universal class to target the filtered items in an isotope grid?

Like they add the class '.is-checked' for the filter buttons, but can't figure out how to relate this to the actual grid items.

Using the Isotope for a portfolio grid and trying to smooth the transitions between .grid-items but not sure what the other state would be.

If it helps https://greyhound-gar-9aft.squarespace.com/my-work
Password: Square

Thanks so much! 🙂