The Kadence Blocks accordion block allows designers to create expandable sections that show and hide content on click, which is perfect for FAQs, product specifications, and any content that benefits from progressive disclosure. When working correctly, clicking on an accordion header expands the section to reveal the content inside, and clicking again collapses it back to its closed state. However, sometimes the accordion simply does nothing when clicked, leaving the content permanently hidden and frustrating visitors who cannot access the information they need.
This problem can be particularly damaging for FAQ pages where users expect to click questions and see answers. When the accordion fails to open, visitors assume the page is broken or that the content is missing, leading to frustration and increased bounce rates. The accordion may work perfectly in the Gutenberg editor but fail completely on the live frontend, making debugging especially challenging because the problem only appears for actual visitors.
The most common cause of this problem is a JavaScript conflict with another plugin or the theme that prevents Kadence Blocks from initializing its accordion functionality. Another cause is that lazy loading plugins are delaying the JavaScript file that controls the accordion behavior, causing it to load after the user has already clicked on the accordion header. Caching plugins that combine or minify JavaScript files can also break the accordion by changing the order in which scripts execute.
Why the Kadence Blocks accordion fails to open on click
Kadence Blocks accordion uses JavaScript to listen for click events on accordion headers. When a user clicks a header, the JavaScript expands the associated content panel and updates the ARIA attributes for accessibility. If the JavaScript file that contains this functionality does not load or executes after the user has already clicked, the click event handler will not be attached to the headers, and nothing will happen when they are clicked. This is a classic symptom of JavaScript delay or defer features in caching plugins.
Another common cause is that another plugin or the theme has its own accordion functionality that conflicts with Kadence Blocks. When two scripts try to control the same elements, neither may work correctly. This is especially common on pages where multiple plugins are adding interactive elements that require JavaScript. Inspecting the browser console for JavaScript errors will usually reveal these conflicts, as the errors often mention undefined functions or variables that another script has overwritten or removed.
Lazy loading plugins can also cause accordion problems by delaying the Kadence Blocks script until after the user interacts with the page. The script may load eventually, but if the user clicks the accordion before the script loads, nothing happens. The script loads too late to capture the click event, and the accordion remains closed. This is particularly common on mobile devices where network connections are slower and scripts take longer to download.
How to check if Kadence Blocks accordion JavaScript is loading
Open the frontend of the website in a web browser and open the developer tools by pressing F12. Navigate to the Network tab and reload the page, then look for JavaScript files that contain “kadence” or “accordion” in their filenames. Check the load time of these files and whether they complete loading before or after user interactions. Also, check the Console tab for any JavaScript errors related to Kadence Blocks or accordion functionality, as these errors will prevent the accordion from working at all.
Step by step guide to fixing Kadence Blocks accordion problems
Follow these steps in order to restore proper accordion functionality in Kadence Blocks. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Disable JavaScript defer or delay features in all caching plugins temporarily
- Exclude Kadence Blocks scripts from being deferred or delayed by caching plugins
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Temporarily deactivate all other plugins to test for JavaScript conflicts
- Switch to a default WordPress theme to test if the theme causes the problem
- Check the browser console for JavaScript errors that might prevent accordion initialization
- Update Kadence Blocks to the latest version available from the WordPress repository
- Regenerate Kadence Blocks assets from the Kadence settings panel if available
- Test the accordion on different devices and browsers to isolate the problem
- Contact Kadence Blocks support with specific details about the accordion failure
How to exclude Kadence Blocks scripts from JavaScript defer
In WP Rocket, navigate to Settings → WP Rocket → File Optimization and find the “Excluded JavaScript Files” field. Add the following handles to exclude Kadence Blocks scripts from being deferred: kadence-blocks-js, kadence-blocks-accordion-js. In LiteSpeed Cache, go to Tuning settings and add the same handles to the JS Excludes list. In W3 Total Cache, find the Minify settings and add kadence-blocks to the “Never minify the following JS files” list. After adding these exclusions, clear all caches and test the accordion again.
Kadence Blocks accordion troubleshooting reference table
Here is a reference table for diagnosing accordion problems in Kadence Blocks based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution | Accordion does nothing when clicked | JavaScript delayed or not loading | Exclude Kadence scripts from defer/delay | Accordion opens then closes immediately | Multiple event handlers or double initialization | Check for duplicate scripts or plugin conflicts | Accordion works in editor but not on frontend | Caching or optimization plugin interference | Clear caches and disable JS optimization temporarily | Accordion works on some pages but not others | Page-specific script conflicts or missing assets | Check each page for unique plugins or custom code |
|---|
For more information about Kadence Blocks accordion settings, visit the Kadence Blocks page on wpwizzy.com.
Preventing Kadence Blocks accordion problems in the future
Exclude Kadence Blocks scripts from JavaScript defer and delay features in all caching plugins as soon as the website is launched. Test the accordion functionality after every plugin update to catch problems early before visitors report them. Clear all caches immediately after updating Kadence Blocks or any plugins that might affect JavaScript execution, and use a staging website to test major changes before applying them to the live production site.
Keep Kadence Blocks and all other plugins updated to their latest versions on a regular schedule, and regularly check the browser console for JavaScript errors that might affect accordion functionality. Consider using the Kadence Blocks accordion with minimal other JavaScript-heavy plugins on the same page to reduce the risk of conflicts. Document any custom exclusions added to caching plugins for future reference when troubleshooting similar issues.