issue regarding collapsible row

Store Design
, , ,

Topic summary

Problem: Opening one collapsible row on a product page (e.g., Description, then Specifications) causes the page to jump to the footer, requiring manual scroll back up.

Diagnosis: A helper attributes the jump to anchor links (e.g., #description) or JavaScript that changes scroll position when toggling rows. This behavior triggers a page jump instead of a simple expand/collapse.

Proposed fixes:

  • Check theme settings so collapsible rows aren’t tied to anchor tags that auto-jump.
  • Add JavaScript to prevent default click behavior on the collapsible row trigger (e.g., addEventListener with e.preventDefault) to stop scroll changes.
  • Optionally review CSS spacing if smooth scrolling still occurs.

Additional note: Another reply discusses the theme editor preview being set to mobile and suggests switching to Desktop mode; includes a screenshot link. This appears tangential to the scrolling issue.

Latest update: The store owner asked where to paste the suggested JavaScript code. No placement guidance or confirmed fix has been provided yet.

Status: Unresolved; awaiting instructions on implementing the script and verification of anchor links/CSS.

Summarized with AI on December 14. AI used: gpt-5.
1

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.

2

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

3

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

4

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