Simple hide/show actions

Can anyone give us a simple step-by-step procedure to add “show section on clicking button?”

The 5 minute tutorial on the subject is confusing with too many collateral involvements.

We was a simple process to:

  1. NOT SHOW a section on page load.
  2. SHOW the section when a button is tapped.
  3. HIDE previously displayed section.

This would be button menu with about 50 buttons that shows/hides 50 sections, each having an image only.

Anyone have any guidance on how to do this simply?

Thanks in advance for any input.

Haha… A simple process to a menu button with about FIFTY (50) buttons, that show/hide FIFTY (50) sections - but wait - it’s only each having an image element (which is really two elements tied together).

Do I have guidance on how to do this simply? Uhhhh.

Just teasing ya! Do you have an example site on what you’re wanting to accomplish?

LOL. Thought about the “50” after posting it, but that is the reality of the project.

Actually, just need the procedure for doing #1 button to show section #1, then #2 button to hide #1 and show section #2. I can take it from there x 50 more times.

Can show you the site insomuch as the content is proprietary of my client.

However, simple scenario is:

  1. Click Button 1
  2. Show Section 1
  3. Click Button 2
  4. Show Section 2
  5. Hide Section 1

…repeat as needed, take two aspirins and drink a pint immediately after.

The Sections, of course, should all be hidden on page load.

The upside of this is: that when done, this app will be duplicated some 25 to 75 times in the future.

The end product will be a bunch of Webflow “Masters” that will be converted to Progressive Web Apps. We have already tested the code to convert and it works on both Android and Apple devices - service worker code isn’t needed.

Anyway, Gary, please to welcome some extra brain power on this task.

HERB

Hahahaha… OMG… you make it sound so easy… like watching Jordan go outside the paint. Aww nah man, just bend your legs and jump dude!

Okay, not a problem, do this:

Create a simple sketch on paper or draw one out. I can’t see how you want the layout in my head.

  1. Will it be - horizontal or vertical buttons?
  2. Are the content blocks horizontal or vertical?

If I have a quick mockup, I can get one out for you.

See concept attached with notes.

FYI. Am willing to make modest payment via PayPal if you want anything for your time/effort.

HERB

One other point. ALL BUTTONS SHOW ALWAYS!

Only the SECTIONS Hide/Show; BUTTONS always Show.

Cool, that’s understandable now.

  1. Are buttons going to aligned on left side of browser?
  2. Do you want to Sections to slide out from left to right. Or fade in. Or show/hide?

I’m gonna grab lunch and I’ll message your profile in a hour or so. No problem.

Actually, the buttons will be a 4-wide grid starting in flex rows at the top of the screen. Might have up to 15-rows overall when done, but just do 4 buttons now with 4 different sections.

That will be enough for us to figure things out from there.

Sections should simply be show/hide with no sliding or actions needed.

Hit the button, the image will appear - poof!

Hit the next button, it goes away and the new one appears same-same.

Will check this posting in the a.m. Need to run some evening errands. We are U.S. Eastern Time in Central North Carolina.

Okay I’m in Dallas so central here. I’ll do 4 for you guys.

Are you sure you don’t want a “Slide In From Left, From Top, etc”? Or a click to move the image div into place? Because if you use a Click to Show/Hide, then you will be moving these elements around in the document flow. Meaning they will take on properties that will effect blocks around them. Opacity is the only one that won’t have an affect on others.

There are a number of ways to accomplish this. I’ll do an opacity for you to see, then we can go from there.

The current “native version” of this app has an “appear” action and client would like to keep it the same way.

Once we have a fixed number of sections, we can put them in the right position on the page so they simple are layered behind each other. That is a minor coding issue we can take care of. It is the actual hide/show interaction that is being elusive.

Clients doesn’t like a lot of “movement” on the app screens.

What we are displaying with the buttons/sections are floor plans of high-rise buildings for emergency personnel to use during life-safety incidents. This will be the prototype for what will be a transition from “native mobile” to “progressive web” formats. We have the code already working to cache the content on both Android and Apple devices.

Back to you Gary?

Oki doki, I have an example to show you, which is basic. But you can see how it’ll work, the easiest.

http://gj-project-1.webflow.io/

Let me know your questions.

Pretty much spot on, except for one thing.

Click on each button in sequence to show the sections.

Then go back and click button one.

That action should show the Section for that button, but it doesn’t display it.

If we can fix that “second click” to force the Section to show, that would do it.

Other than that, it functions exactly the way we want. Excellent!

Back to you.

Gotcha… the reason I did that is because - well let me ask?

Do you need at some point, that all the images are NOT showing? That’s why I added the second click to close them all.

But you want the 2nd Click to open itself?

Correct! The images should NOT SHOW unless a button is tapped.

Alternatively, we could put a default generic message screen to show initially, then when a button is tapped, the floor plan displays, etc.

However, not necessary at this point without mulling it over with client. They are very “hands on” insofar as how things look to them on screen.

Let’s do this …

Let me have Webflow access to what you have done and let me try to make a duplicate copy on my account. Will be able to play with it over the weekend.

Stay out of the snow down there!!!

Haha… okay the best way to do this… is to create a page on your site… shoot me the login details to my profile in private message. I’ll login and create it, then you can show it to your client. They can look through the steps. It’ll take about 30 minutes to add to the page. Send message to my account.

Sent you the message.

Knock Knock.

Getting the project aligned pretty good, and may have another task.

Upon load, can the images be set to a “0” height, and when clicked to view, explodes to the 100% size?

Am trying to eliminate the blank spaces between the buttons with a vertically stacked layout.

Back to you.

Sure, adjust the intial appearance on the 1st interaction and add scale 0. Then on the button interaction, you’ll need to adjust both clicks to scale 1.

Or do you just want me to do it? Ha :smiley: