Jump to content

How to add Category tab buttons to filter within Summary block

Recommended Posts

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 :

 

1391718203_ScreenShot2021-03-24at3_26_10PM.thumb.png.8ce65faa2e25cab6366fc3dcad01decf.png

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.

 

Edited by jordin0317
Link to comment
  • jordin0317 changed the title to How to add Category tab buttons to filter within Summary block

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)

Edited by tuanphan

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
  • 1 year later...

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

image.thumb.gif.21e0cd8f7aa667604d120103c1ef14b4.gif

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

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
  • 7 months later...
On 1/20/2023 at 4:41 AM, paul2009 said:

 

image.thumb.gif.21e0cd8f7aa667604d120103c1ef14b4.gif

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! 🙂

Edited by melaniejaane
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.