How to use a link block to do multiple things

Design help General
1

Hi all,

Hope someone can help me here.

The scenario:

I’ve got 3 sections, 1 after another.

  • Top section contains 3 buttons (link blocks).
  • Middle section called hidden content is hidden (0px in height).
  • Third section contains main content.

All three buttons have the same main function.

  1. Expand hidden content section to be 800px in height
  2. MOVE(!!) the screen down to the hidden content section, hence the use of the link block
  3. Show content relative to the button that is pressed. i.e. button 1 shows content 1, button 2 shows content 2 and button 3 shows content 3.

This is where I’m stuck.

I’m aware that I can use tab buttons to flip between the content, but then I can’t move down to the section. I can use the link block to move to the section but not display the tabbed content. How can I possibly do both?

2

Does anyone know of a work around to achieve the same effect?

3

Hi @peted83, thanks for the updates. Sorry for the delayed reply. Could you share the site read-only link: Share a read-only link | Webflow University. This way we can look how you have this setup and make some suggestions :slight_smile:

4

Hi,

Try this link:

https://preview.webflow.com/preview/monitor-test-2?preview=5c1eee291f063ebc9f1065e1ae3cf6fa

If you click the first or second column a couple of times you should get an idea of what i’m trying to achieve.

Thanks

Pete

5

Hi @cyberdave , did you manage to take a look?

Thanks

Pete

6

Hi @peted83, thanks for your followup, I am still looking into this to see if there is a way to design this without having to use some custom jQuery. If I understand correctly you want to:

  1. Click a column and scroll to the hidden section
  2. Unhide the hidden section that relates to the button pressed, or otherwise show some specific content when the column is pressed.

Currently, if you set the link block to scroll to a section, that will cancel any interaction placed on the link block.

It might be easier to create hidden sections and setup a little jQuery to first scroll to the ID to the section you want to view, and then set the display of that section to Block, thus displaying the content. I will keep checking on a code free alternative setup in Webflow :slight_smile:

7

Hi @cyberdave,

Thanks for your reply. A possibility is to use 7 hidden section (0px height), 1 per column button, and have the relevant section expand. Seems a bit messy though but may achieve what I require, unless you find a better solution. :smile:

Thanks for your help on this

Pete

8

Hi @peted83, yes that absolutely possible to setup separate interactions. You would need to manage the hidden content with the interactions separately, as you have indicated, with a separate interaction, targeting a different hidden element.

I will continue to check and if I come up with some ideas, I will let you know :smile:

Cheers,
Dave

9

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