How To Scroll Accordion Item To Page Top When Clicked

Ask the community
, ,
1

Is there a way to animate accordion items to the page top after clicking and the item expanding. I have accordion items with lots of content inside and at the moment the page scrolls wildly on clicking another item.

Wix Studio

I wont the clicked item to animate to the top of browser window and allow for the collapsing and expanding of the accordion items so that the item that is clicked ends up at the top, expanded and ready to read.

This is as close as I have come however it scrolls to the page top instead of creating an offset and placing accordion item at browser top:

import  wixWindow from 'wix-window';

$w.onReady(function () {
    // Assuming accordion2 is the ID of the accordion
    $w("#accordion2").onClick((event) => {
        // Get the top position of the clicked section
        let sectionOffset = $w("#" + event.context.itemId).top;

        // Scroll to the top of the clicked section
        wixWindow.scrollTo(0, sectionOffset, {
            "duration": 500 // 500ms for smooth scroll
        });
    });
});
2

On Click Event’s isn’t available for Accordion or Accordion Items.

There are 3 alternative solutions for it.

  1. You can Keep the size of items limited and in the Overflow Setting of According Item(Select the item from panel, and go to inspector panel), set it to scroll. It will add a scroll bar to the Long Content.
  2. If its a text, you can use the collapsible text instead of regular ones.
  3. If you have all sorts of elements, you can design a custom accordion using the Multi State Box.