issue regarding collapsible row

[SinghSells]

Hi guys, I'm having issue with my store. When I click on one of the collapsible row lets say I click on description and then click on next collapsible row (specifications). I end up in the footer menu and I have to scroll up to see the collapsible row. 

can someone help me with this issue?

here is the link  for my store's product page.

[DaisyVo]

Hi @SinghSells 

The issue occurs because clicking on collapsible rows changes the page's scroll position due to anchor links or improper JavaScript handling. To fix this:

1. Check Theme Settings: Ensure the collapsible rows aren’t linked with anchor tags (e.g., #description) that jump to specific sections of the page.
2. Adjust JavaScript: Add a script to prevent scroll changes when rows toggle. Example:

document.querySelectorAll('.collapsible-row').forEach(row => {

    row.addEventListener('click', e => {

        e.preventDefault();

    });

});

3. Edit CSS (Optional): If smooth scrolling behavior persists, verify padding/margins around collapsible sections.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy

[SinghSells]

Hi thanks for the response. However, where do I need to paste that given code above?

[DaisyVo]

Hi @emink6 

The issue likely arises because the website editor is set to preview the mobile version. This doesn't affect how the site appears to desktop users but can limit your editing view.

To resolve this:

1. Check your theme editor settings under Online Store > Themes > Customize: https://prnt.sc/1JKq89TZC0CH
2. Ensure the editor is set to "Desktop" mode (you'll see a toggle for desktop, tablet, and mobile at the bottom or top of the editor).
3. Save your settings and refresh the editor.

If the issue persists, clear your browser cache or try another browser.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy