Button to go to another page on a specific place (into a tabs)

Ask the community
,
1

Good morning everybody,

I searched but found nothing for the effect/link I need.

I have a button on one page (page TWO in my example) that should send the visitor to another page (page ONE) and into a module that is in three parts (tabs - with collapse box A,B and C) so that part/box “B” is displayed directly! (instead of “A” which is initially displayed when we arrive on page ONE by normal way, menu or so)

I don’t know where I have to put a code for that (page ONE, or TWO, or both) and which would be the “best” code I have to use ?

To illustrate my need:

Initial display on my page ONE :

1130×600 32.2 KB

And when clicking the button on my page TWO, we arrive on page ONE with the “B” box of my tabs displayed …

1141×916 21.3 KB

And here is the code I have on page ONE (for my tabs) :

$w . onReady ( function ( event ) {
$w ( ‘#buttonA’ ). onClick (() => {
if ( $w ( “#boxA” ). collapsed ) {
$w ( “#boxA” ). expand ();
$w ( “#boxB, #boxC” ). collapse ();
}
});

$w ( ‘#buttonB’ ). onClick (() => {
if ( $w ( “#boxB” ). collapsed ) {
$w ( “#boxB” ). expand ();
$w ( “#boxA, #boxC” ). collapse ();
}
});

$w ( ‘#buttonC’ ). onClick (() => {
if ( $w ( “#boxC” ). collapsed ) {
$w ( “#boxC” ). expand ();
$w ( “#boxA, #boxB” ). collapse ();
}
});
});

Many thanks if someone could help me
Seb

2

Hello, I’m currently running into this issue right now, were you able to figure out a solution?

Thanks,
Anthony

3

Hi,

maybe a stupid question, but have you ever asked GPT, it has helped me several times. In this case (without having checked it myself):

To achieve this functionality in Wix Velo, you would need to add code to both page ONE and page TWO. The code on page TWO will direct the visitor to page ONE and pass a parameter indicating which tab to display. Then, on page ONE, you’ll use this parameter to determine which tab to show by default.

Here’s a step-by-step guide:

  1. On page TWO: Add a button that links to page ONE with a parameter indicating which tab to display. For example, if you want to display tab B by default, the URL parameter might look like ?tab=B.

htmlCopy code

<a href="/page-one?tab=B">Go to Page One</a>
  1. On page ONE: Use Wix Velo to read the URL parameter and show the corresponding tab by default.

javascriptCopy code

import wixLocation from 'wix-location';

$w.onReady(function () {
    const params = wixLocation.query; // Get URL parameters
    const defaultTab = params.tab || 'A'; // Default to tab A if no parameter is provided
    showTab(defaultTab); // Show the default tab
});

function showTab(tabName) {
    // Hide all tabs
    $w('#tabA').collapse();
    $w('#tabB').collapse();
    $w('#tabC').collapse();

    // Show the specified tab
    $w(`#${tabName}`).expand();
}

Ensure you replace tabA, tabB, and tabC with the actual IDs of your collapse boxes.

With this setup, when the visitor clicks the button on page TWO, they will be directed to page ONE with the specified tab (e.g., tab B) displayed by default. If no tab parameter is provided in the URL, it defaults to tab A.