▼
Streaming live at 10am (PST)

Showing and hiding text options

#1

Hello Community!

First time forum poster and first time Webflow user. So far I love it! I can't want to learn more.

For my first site, I bought and edited the Attorney CMS theme to get my feet wet. I would love some advice about showing and hiding text and the options I have for this.

Here is the site I'm working on:
https://preview.webflow.com/preview/finsweet101?preview=26693b78c0093e1017ba3dfdbb1d4d87

Navigate to the "Industries" page via the nav tab and you'll see 3x2 image grid. When you press each one, the text for that industry shows up in the section below. However, When you press another one, the text containers pile on top of each other. Ideally, I would like others to disappear when a different industry is selected.

This definitely seems like a job for the "Tabs" element. When I originally tried the tab option, I got some really weird formatting issues and it was a headache. I think because I'm so new to Webflow. I gave this simple 'display none > display block when clicked interaction' way a chance to see if I was able to recreate the same effect.

My question is - is there a way to only show one text container at a time with the method I'm using right now? Or is this a job that needs to be done with tabs? Any and all advice on the best practice here is helpful!

Any comments on the site as a whole are welcome and appreciated

#2

Hi!
Welcome to the Webflow community! :slightly_smiling:
I took a look at your site, and maybe I'm misunderstanding what you wrote, but the only thing that happens for me over those image grids is that the image goes from monotone to full color on hover. No new text shows or anything.

Have you already found your answer and changed it, or am I missing something?

#3

Hi @ctotty - sorry for not being specific enough. Click on any of those images for its respective text to appear in the section below.

#4

No, that was my bad. I was on an ipad when I first took a look, and did not see anything happening because the text was appearing out of my window view. Duh. :slightly_smiling:

I do believe currently that tabs is your best bet. You could do a complicated show/hide interaction on every clickable. For example, if you click "Public Officials," you would have an interaction to show its corresponding text, and hide every other text block, and on down the line. I can't think of a reason to choose that complexity over tabs, but at least you know it's available if you want to go that route.

Considering what happened to me and now realizing text was appearing, I'd have some sort of arrow indicator or something visual to let the viewer know that something is happening below. And actually, I'm looking at it on a 21" screen right now, and your text is showing so far down the page, it's still not obvious that text is appearing.

Other than that I think your site is coming along nicely! Good luck!

#5

One other option, you could add a "close" interaction in your detail text that closes it. It would at least be an easy workaround, and only require an extra click on the part of the viewer. Just a thought. :slightly_smiling:

#6

Thank you for this. It is very helpful. I will have to change that effect for tablet and mobile - the way it is now makes for a terrible user experience.

I'm going to play around with tabs and see if I can make it work. Thanks again.

closed #7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.