scrollTo with collapsing boxes

Ask the community
1

I was wondering if someone could help me with this, I have set up some repeaters with expanding/collapsing boxes. I have set them up so that opening the boxes of one section closes the open boxes of the other sections, and scrolls to the top of that section - 100px to account for my header.

My problem is - when the buttons trigger the collapse of boxes in the section above the one I need the box to open in, it seems to affect the position of the anchor. Probably my code is bad (I am learning as I am going), but this is how I have it set up for now:

    $w('#systemsrepeater, #toprepeater, #bottomrepeater').forEachItem(( $item, itemData, index) => {
        $item('#SODbutton').onClick(() => {
            $item('#PPCbox, #EDRbox, #btdbox, #lmdbox, #citbox, #tmbox').collapse(), $item('#SODbox').expand(), $item('#systemsanchor').scrollTo();
        })
        $item('#EDRbutton').onClick(() => {
            $item('#PPCbox, #SODbox, #btdbox, #lmdbox, #citbox, #tmbox').collapse(), $item('#EDRbox').expand(), $item('#systemsanchor').scrollTo();
        })
        $item('#PPCbutton').onClick(() => {
            $item('#SODbox, #EDRbox, #btdbox, #lmdbox, #citbox, #tmbox').collapse(), $item('#PPCbox').expand(), $item('#systemsanchor').scrollTo();
        })
        $item('#btdbutton').onClick(() => {
            $item('#SODbox, #EDRbox, #PPCbox, #lmdbox, #citbox, #tmbox').collapse(), $item('#btdbox').expand(), $item('#serviceanchor').scrollTo();
        })
        $item('#lmdbutton').onClick(() => {
            $item('#SODbox, #EDRbox, #btdbox, #PPCbox, #citbox, #tmbox').collapse(), $item('#lmdbox').expand(), $item('#serviceanchor').scrollTo();
        })
        $item('#citbutton').onClick(() => {
             $item('#SODbox, #EDRbox, #btdbox, #PPCbox, #lmdbox, #tmbox').collapse(), $item('#citbox').expand(),$item('#serviceanchor2').scrollTo();
        })
        $item('#tmbutton').onClick(() => {
            $item('#SODbox, #EDRbox, #btdbox, #PPCbox, #lmdbox, #citbox').collapse(), $item('#tmbox').expand(), $item('#serviceanchor2').scrollTo();
        })
        $item('#closesod, #closeppc, #closeedr').onClick(() => {
            $item('#SODbox, #EDRbox, #PPCbox').collapse();
        })
        $item('#closeb, #closel, #closec, #closet').onClick(() => {
            $item('#btdbox, #lmdbox, #citbox, #tmbox').collapse(), $item('#serviceanchor').scrollTo();
        })
})
}

I am also sure that there is a much simpler way of programming this! If anyone can help out that would be much appreciated

2

Hey,
I think the problem is that the expand and scrollTo happened together so you get the position when the box is collapsed. Because collapse and expand return a promise you can force to wait until the box finish to expand and only then scroll to this box.
So you can add AWAIT to the expand or call .then() after expand().

For example:

$w('#repeater1').forEachItem(($item, itemData, index) => {
 
    $item('#button_id').onClick(() => {
        $item('#box_id').expand().then(() => {
            $item('#box_id').scrollTo();
        });
    });

 // or

    $item('#button_id').onClick(async() => {
        await $item('#box_id').expand();
        $item('#box_id').scrollTo();
    });
    
});

Try it and let me know if it works for you.

3

@md60th Thanks for this, this works for me!

I have one other question. If I choose for example, to scroll to a section, it hides that section behind the header which is always visible on my website. Is it possible to take into account the height of the header (90px)?

4

There is a method I use - I do not know if it is the best but it works.
I add to the section a horizontal line with color 0% and dock it to the top. Then i set negative margin as the header height . Then I give the scrollTo to the line and not to the section.
For example: if I have a header that is 90px high. I give the line inside the section - margin-top: -90px

5

Thanks, I have also been doing that but thought it felt a little clunky. Although if it works, it works!