Fixing Accordion Scroll and Anchor Link Issues in Kadence Blocks

Many users of the Gutenberg Blocks with AI by Kadence WP plugin leverage the powerful Accordion block for FAQs, product details, and content organization. A common challenge arises when these accordions contain large amounts of content: the page scroll position can behave unexpectedly when opening, closing, or linking to panels. This article explains why this happens and outlines the most effective solutions.

Understanding the Problem

The core issue is related to dynamic page height. When you open or close an accordion panel filled with content, the total height of the page changes instantly. Your browser's current scroll position is a fixed pixel distance from the top of the page. When the page suddenly shrinks (because a large panel was closed) or grows (because a new one opened), that fixed pixel position can land you in an unexpected place, such as viewing the site footer or the middle of a different panel. This is especially noticeable on mobile devices.

Common Solutions and Workarounds

1. Configure the "Auto Close" Setting

The most straightforward solution is to change how the accordion behaves. A recurring suggestion from the Kadence WP team in support threads is to disable the "Auto Close Panels" setting if your accordions contain long content.

• Why it works: When "Auto Close" is off, opening a new panel does not collapse the previous one. The page's total height only increases, preventing the jarring scroll jump that occurs when the page suddenly shrinks.
• How to do it: Edit your Accordion block. In the block settings sidebar, look for the "Auto Close Panels" option (often under 'Behavior') and ensure it is toggled off.

2. Linking to Accordions with Anchors (And Getting Them to Open)

Linking directly to a specific accordion panel is a powerful feature. To make it work correctly:

1. Edit your Accordion block and click on the specific panel you want to link to.
2. In the block's Advanced settings in the sidebar, find the "HTML Anchor" or "Custom ID" field.
3. Enter a unique ID for that panel (e.g., my-panel-one).
4. Use this ID in your URL with a hash symbol (e.g., https://yourwebsite.com/page/#my-panel-one).

Known Issue: Some users report that panels do not automatically open when arriving at the page via an anchor link. This appears to be a known intermittent bug. A common observation is that clicking the link a second time often works. The behavior can be browser-dependent.

3. Custom CSS for Specific Styling Issues

Scroll and positioning issues can sometimes be related to other CSS on your site.

• Z-Index Conflicts (Dropdowns appearing behind accordion): If your navigation menus or other elements appear behind the accordion content, a z-index conflict is likely. You may need to use custom CSS to override a high z-index set by another theme or plugin. One example fix found in the forums was:
  .wp-block-uagb-container, .wp-block-uagb-container>*:not(.uagb-container__shape) { z-index: unset; }
• Centering Titles: To center an accordion title, use this CSS snippet:
  .kt-blocks-accordion-title-wrap { display: inline; width: 100%; text-align: center; }

What Currently Isn't Possible

It's important to manage expectations based on the plugin's current functionality:

• Persisting State: The accordion will not remember which panel was open if the page is refreshed or if you navigate away and return using the browser's back button. It will always revert to its initial configured state (e.g., all collapsed or a specific panel open).
• Automatic Smooth Scrolling: There is no built-in setting to automatically scroll the opened panel to the top of the viewport. This would require custom JavaScript, which is beyond the scope of the block's standard features.

Conclusion

Scroll and anchor link issues with the Kadence Accordion block are typically not bugs but a side effect of how dynamic content affects page layout. The most effective mitigation is to disable the "Auto Close Panels" option for long accordions. For linking, ensure you are correctly using HTML Anchors. For other visual issues, carefully applied custom CSS can often resolve conflicts. Understanding these underlying causes will help you configure your accordions for a smoother user experience.