expand a box in page 2 based on a link click on page 1

Ask the community
,
1

Hi All,

I have a page 1 with multiple links to page 2 where i have several collapsed boxes.

I would like to program each link in page 1 to open page 2 and automatically expand the related box.

Can you please help on providing some example codes that i can adapt to mine need.

Thanks in advance.

2

Hi Hicham :raised_hand_with_fingers_splayed:

I suggest that you add a unique identifier on each link, for example, if the page is a dashboard one, and you want to open certain sections, you can link to them like this on your “page 1”:

$w('#details').link = `/dashboard?section=details`;
$w('#account').link = `/dashboard?section=account`;
$w('#notifications').link = `/dashboard?section=notifications`;

// And so on ..

And on your second page, use wixLocation.query to get the query of the page and decide which box to expand:

import wixLocation from 'wix-location';

$w.onReady(() => {
    chechQuery();
})

function chechQuery() {
    let query = wixLocation.query;
    
    if (Object.keys(query).length > 0) {
        if (typeof query.section === 'string') {
            const section = query.section;
            switch (section.toLowerCase()) {
                case 'details':
                $w('#detailsBox').expand();
                break;
                
                case 'account':
                $w('#accountBox').expand();
                break;
            }
        }
    }
}

And that’s it, you can tune it and adjust it to your needs.

Ahmad

3

Hi Ahmad,

Thanks for your answer…I’m not quite sure how to adapt it to my code since i don’t have much knowledge in coding.

Let me explain more my setup:

Page 1:

  • page name: “tutoriels”
  • page id : “1”
  • Text field: “text1” (which i want to link to page 2)

Page 2:

  • page name: “catalogue”
  • page id: “2”
  • boxes: “columnStrip1”, “columnStrip2”, “columnStrip3” (all collapsed by default)
  • Anchor: “anchor1” (pointed to “columnStrip3)”

When clicking “Text1” on page 1, i want it to open page 2 then go to “anchor1” and expand “columnStrip3”.

4

I appreciate if i can get any help on this, i’m really stuck and couldn’t find anything useful online.