I would like the pictures AND text to change with each link I click

Design help General
1

Hello,

I am currently designing a ‘careers’ section where I describe various job openings.

What I would like is to have the list of the 4 departments (customer service, sales, technology, and administration) and when I click on one I would like the image and the job description to appear according to the link I click.

Is this possible? If so, how do I set it up?

I would like for the default to open on ‘programmers’ and have the other 4 options on the side.
I will need to also make sure that once the user clicks on a different position, there is a way for them to go back to programmer.

I hope this isn’t too complicated. It makes perfect sense in my head :smile:

Thank you in advance!

1089×704 139 KB

Here is my public share link: LINK
([how to access public share link][2])

2

Hi @cjeancouture

Ok, let me know if I understood your explanation correct.

You want to have this 4 options for “programmer” section. Also, you want different sections to appear when user will click some other links on the side.

Regards,
Anna

3

Yes, that’s basically it.

There are 5 sections, one which shows by default (programmer) and the others cycle to fill the same space, when clicked.

4

Ok :slight_smile:

Here is some “crazy” idea how to do what you want by using tabs
https://drive.google.com/file/d/0B-7cg8BSq1Z_RVdxQ0xrYzJ1S3M/view

Regards,
Anna

5

Hi,

Thank you for your video. I am looking at it now but there is no volume and the writing is very blurry so I can’t read it. Any way you could give me a breakdown to help me follow what you’re doing in the video?

Thank you!

6

Hey @cjeancouture

You can definitely do this by using the Tabs Widget, there’s a tutorial here on using the tabs widget:
http://help.webflow.com/lesson/tabs

So if you style each tab with an h6 inside of it and then put the job description inside each tab pane. :slight_smile:

Most of the time, users will cycle through the tabs looking the jobs they’re interested in :slight_smile:
Hope this helps! :slight_smile:

7

Thank you @Waldo

Could you please address the other issues I mentioned in my email?
Thanks

8

@sabanna This is so frustrating! This video is exactly what I want but I can’t follow it because there is no sound and the writing is too small. Please help!!

9

Hi @cjeancouture

Basic steps that I did:

  1. Create container
  2. Add TABS widget inside the container
  3. Tabs widget has 2 parts: Tabs-menu and Tabs-content. With style settings you “separate” them so they will look like columns
  4. make tabs widget fixed height so it will not “jump” when user will click on different links
  5. Style all tab-links as you need. One of links (programmer) give position: absolute and move on the place over the tabs widget. BUT you have to do this when this link is not in the current state (when another tab-pane opened)
  6. Add images (links) texts to every tab-pane.
  7. For make text block wider make it position: absolute and width 150-200%.
  8. For fix “cutting effect” on text make tab-content overflow: visible.

Also, try to make video fullscreen and change settings to HD. It should make all writings looks more clear.

Regards,
Anna

10

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