top of page

how did this website create this interaction https://quantrolox.com/careers/ So when you click on career on the same page a new window open. can you send me the steps how to reproduce this in wix?

ChatGPT zei:

To create an interaction in Wix where clicking a link opens a new window, follow these steps:

  1. Add a Link to Your Element:

    • In the Wix Editor, select the element you want to link (e.g., text, button, image).

    • Click the 'Link' icon.

    • Choose the type of link you want to add (e.g., 'Web Address' for an external site or 'Page' for another page on your site).

  2. Set the Link to Open in a New Window:

    • After entering the URL or selecting the page, look for the option labeled 'What does this link do?' or similar.

    • Select 'Opens in a new window'.

    • Click 'Done' to apply the changes.

By configuring the link to open in a new window, visitors clicking on it will have the linked content displayed in a separate browser window or tab, depending on their browser settings.

For a visual walkthrough, you might find this tutorial helpful:

Bronnen

Je zei:

but i want to keep it on the same window

ChatGPT zei:

If you want to show career listings on the same page without opening a new tab or redirecting the user, you can achieve this in Wix using a Lightbox or a Hidden Section. Here’s how you can do it:

Method 1: Using a Lightbox (Popup Window on the Same Page)

  1. Go to Wix Editor and click "Add" (+ icon) > Interactive > Lightbox.

  2. Choose a Blank Lightbox and customize it to show your careers information.

  3. Add Text, Images, or a Repeater to display job listings.

  4. Close Button: Make sure to add a button to close the Lightbox.

  5. Trigger the Lightbox on Click:

    • Select the career button or link.

    • Click "Add a Link" > "Lightbox" and select the Lightbox you just created.

Now, when users click the Careers button, the Lightbox will appear without leaving the page.

Method 2: Using a Hidden Section (Show Content Dynamically)

  1. Create a Hidden Section:

    • Add a new section at the bottom of your page.

    • Add job listings (text, images, buttons) inside this section.

    • Keep the section hidden initially.

  2. Use Wix Velo Code to Show the Section on Click:

    • Enable Wix Dev Mode (Velo) from the top menu.

    • Click on your Careers Button and go to Properties Panel.

    • Add an ID (e.g., #careersSection).

    • In the Code Panel, add this code:

    javascript

    KopiërenBewerken

    $w.onReady(function () { $w("#careersSection").collapse(); // Initially hide section $w("#careersButton").onClick(() => { $w("#careersSection").expand(); // Show section on click }); });

Now, when users click the Careers button, the section with job listings will appear on the same page without reloading.

Would you like help customizing this further? 🚀

Je zei:

yes so when the user click on this page, the window opens with the vacancy text. then in this text I want to add an apply now button. all on one page how can I do this

ChatGPT zei:

To achieve this effect in Wix, where clicking on a career listing opens a job description within the same page with an "Apply Now" button, follow these steps:

Step 1: Set Up the Career Listings (Buttons or Text)

  1. Go to the Wix Editor and add buttons or text elements for each job vacancy (e.g., "Software Engineer," "Marketing Manager").

  2. Assign each job listing a unique ID in the Properties Panel (e.g., #job1, #job2).

Step 2: Create a Hidden Job Description Section

  1. Add a new section below your career listings.

  2. Inside this section, add:

    • A text box to display the job description.

    • An "Apply Now" button (we will link this to an application form later).

  3. Set the section to hidden by default:

    • Click on the section, then "Collapse on Load" in the Properties Panel.

    • Assign an ID to the section (e.g., #jobDescriptionSection).

    • Assign an ID to the text box (e.g., #jobDescription).

Step 3: Use Wix Velo Code to Show Job Descriptions Dynamically

  1. Enable Developer Mode (Velo) in Wix (Top Menu > Dev Mode > Turn On Developer Mode).

  2. Open the Code Panel and add this JavaScript code:

javascript

KopiërenBewerken

$w.onReady(function () { // Collapse the job description section initially $w("#jobDescriptionSection").collapse(); // Add event listeners for each job listing button $w("#job1").onClick(() => showJobDescription("Software Engineer", "This is the job description for Software Engineer.")); $w("#job2").onClick(() => showJobDescription("Marketing Manager", "This is the job description for Marketing Manager.")); }); function showJobDescription(title, description) { $w("#jobDescription").text = title + "\n\n" + description; // Update the text box $w("#jobDescriptionSection").expand(); // Show the section }

Step 4: Add the "Apply Now" Button

  1. Inside the job description section, add an "Apply Now" button.

  2. Link this button to an application form or a Wix form page.

    • If using a Wix Form, connect it to a database to collect applications.

    • If linking to another page, set the button to open an application form in a lightbox or on the same page.

How It Works

  • When a user clicks on a job listing, the job description appears in the hidden section.

  • The "Apply Now" button directs users to apply for the specific job.

  • This keeps everything on one page without reloading.

Would you like help styling it to look more interactive? 🚀

Je zei:

how can i keep it hidden

ChatGPT zei:

To keep the job description hidden by default and only show it when a user clicks a job listing, follow these steps:

Step 1: Set the Section to Be Hidden Initially

  1. Go to Wix Editor and select the section that will contain the job description.

  2. In the Properties Panel, find the option "Collapse on Load" and enable it.

    • This ensures the section is hidden when the page loads.

  3. Assign an ID to this section (e.g., #jobDescriptionSection).

Step 2: Use Wix Velo Code to Show the Section on Click

Now, use Wix Velo to make the section appear when a job listing is clicked.

  1. Enable Developer Mode (Velo)

    • Go to Dev Mode in the top menu and turn it on.

  2. Assign IDs to the elements:

    • Assign an ID to each job button (e.g., #job1, #job2).

    • Assign an ID to the text box inside the hidden section (e.g., #jobDescription).

    • Assign an ID to the Apply Now button (e.g., #applyNowButton).

  3. Add this JavaScript code in the Code Panel:

    javascript

    KopiërenBewerken

    $w.onReady(function () { // Keep the section hidden when the page loads $w("#jobDescriptionSection").collapse(); // Click event for each job listing $w("#job1").onClick(() => showJobDescription("Software Engineer", "This is the job description for Software Engineer.")); $w("#job2").onClick(() => showJobDescription("Marketing Manager", "This is the job description for Marketing Manager.")); }); function showJobDescription(title, description) { $w("#jobDescription").text = title + "\n\n" + description; // Update the job description text $w("#jobDescriptionSection").expand(); // Show the hidden section }

Step 3: Hide the Section Again (Optional)

If you want the user to be able to close the job description, add a "Close" button:

  1. Add a button inside #jobDescriptionSection and name it "Close".

  2. Assign an ID (e.g., #closeButton).

  3. Update the code:

    javascript

    KopiërenBewerken

    $w("#closeButton").onClick(() => { $w("#jobDescriptionSection").collapse(); // Hide the section when clicking "Close" });

Final Result

  • The job description remains hidden until a job listing is clicked.

  • Clicking on a listing reveals the job description dynamically.

  • The Apply Now button remains inside the revealed section.

  • The "Close" button allows the user to hide the section again.

Would you like help styling it to make the transitions smoother? 🚀

Je zei:

where can i find the properties panel and option collapse and load on wix

ChatGPT zei:

In Wix, the Properties Panel (now called the "Settings Panel") and the Collapse on Load option are part of the Wix Editor when Developer Mode (Velo) is enabled. Here’s how to find and use them:

1. Enable Developer Mode (Velo)

Before you can access the properties panel and collapse elements on load, you need to enable Velo:

  1. Open your Wix Editor.

  2. Click on "Dev Mode" in the top menu.

  3. Select "Turn On Developer Mode" (this will open the Code Panel and the Properties Panel on the right).

2. Find the Properties Panel

Once Developer Mode is enabled:

  1. Click on the section or element (text box, button, container, etc.) that you want to hide initially.

  2. On the right side of the screen, you should now see the Properties Panel.

  3. Scroll down until you find the "Hidden on Load" and "Collapsed on Load" options.

3. Enable "Collapse on Load"

To make a section hidden when the page loads:

  1. Select the job description section.

  2. In the Properties Panel, check the option "Collapsed on Load".

    • This ensures the section is invisible when the page loads but can be shown using code.

  3. If you also see "Hidden on Load", do NOT enable it, because a "hidden" element cannot be expanded later using code.

4. Add an ID to Your Section

  1. In the Properties Panel, find the "ID" field.

  2. Rename it to something meaningful, such as #jobDescriptionSection.

  3. Now, this ID can be used in the Wix Velo code to show or hide the section dynamically.

5. Test It

  1. Click Preview (top right) in Wix Editor.

  2. The section should now be hidden when the page loads.

  3. Use the Wix Velo Code from my previous messages to show it when a job listing is clicked.

Now, your section remains hidden until the user clicks a job listing. Let me know if you need more help

bottom of page