How can I add a filter button to a page?

Design help General
1

Hey there,

I want to show/hide a page’s content by the elements that are clicked. I was thinking I may be able to use the show/hide element on click, but I wonder if that would be limit my use case.

What I need to do is add almost a Yelp like filter element. There will be 6 profile images that I want to filter by a button click. For example, imagine there is 6 restaurants:

2 serve pizza (a)
2 serve burgers (b)
2 serve burgers and pizza (c )

A user can click an element to select “pizza” in which case 4 profiles appear (a and c profiles).

How can I create this?

Thank you!

2

Are you using a CMS? If you do the easy solution is tabs with collection with filter

3

Hi @JanneWassberg, I’m not at the moment but I was planning on upgrading my plan once I get a better hold of how to use Webflow.

Do you have any resources or instructions that would help me further? (ie tutorial, steps etc)

Thank you!

4

Try this one

1 Like
5

Hi @JanneWassberg, thank you I’ve been able to create what I needed!

Something I’m still trying to figure out about the tabs menu is how to add horizontal scroll on mobile. I posted a separate question about it, but it seems you might be my best bet. How do you think I could go about doing that?

Thanks

6

Any reason you want horizontal scroll.
I always stack them on top.

You hav to play with overflow on your menu object

7

@JanneWassberg the reason is when there’s more than 3 tabs (as is in my use case), stacking them on top of one another would take too much space on mobile devices, specially since my tabs will contain images or icons. This would result in too much scrolling to get to the actual tab content (aka lower conversion rate).

The horizontal scroll would allow me to create something unique and pleasant with the ability to scroll to the left and right. This on mobile and as is on desktop would be great.

8

Maybe this can help

9

@JanneWassberg doesn’t look like it, but thanks for sharing. Does Webflow allow me to upload a css code for a section of the website? Thinking maybe I can add the code here W3Schools Tryit Editor ?

10

You can add code using embedded object

11

Sorry I actually think this requires more coding than I thought and I’m not a developer. It doesn’t seem like I can just change the div class name and drop the css code.

I would think this is a simple scroll implementation, considering all the other animations and scrolling features Webflow has. Am I out of luck?

12

@am93 Here is project you can clone with your menu

13

Hi @JanneWassberg, how can I incorporate that into my tabs menu?

Error: “Non-tabs item cannot be placed in tabs” this is why I couldn’t make it work earlier as well. It’d be great if you could include this into the tab element and place an image as the selector with a sub-title as well. Thanks

14

@am93 how dos your site looki like? Do you have a read only link?

15

Here’s the link: Webflow - Horizontal scroll tab

16

@am96 go to my project again and make a new clone

1 Like
17

@JanneWassberg ok thanks, it looks like you made it work! Can you point out the part that I need to change?

I compared it with the clone of yours ad for some reason it’s not working https://streamable.com/wazj92

Maybe it’s because your tab is in a div block and mine is in a container?

18

@am93 On my iPad now. In the div there is a block with embedded code.
You need that part.

Then you have to change the class name of the tab menu. If you use my code you have to use the same name

1 Like
19

@JanneWassberg ah I see, I thought because it was a separate menu that I wouldn’t need anything from it. So presumedly I can remove: <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#support">Support</a> <a href="#blog">Blog</a> <a href="#tools">Tools</a> <a href="#base">Base</a> <a href="#custom">Custom</a> <a href="#more">More</a> <a href="#logo">Logo</a> <a href="#friends">Friends</a> <a href="#partners">Partners</a> <a href="#people">People</a> <a href="#work">Work</a> from it and keep the position of the embedded code the same?

20

@am93 yes my latest clone have 2 different menus. The long one in the div and the second one in the tab. They are not depending on each other. You can remove the div menu and it will work in the tab.

Ok?

1 Like