Back to Community

Troubleshooting Common CoBlocks Accordion Issues: From Missing Icons to Collapsing Blocks

Content

The CoBlocks Accordion block is a powerful tool for creating organized, space-saving content. However, like any complex feature, users occasionally encounter problems. Based on community reports, this guide covers the most frequent Accordion block issues and provides clear, step-by-step solutions.

1. Missing Arrow Icons in Firefox and Other Browsers

The Problem: Users frequently report that the accordion's toggle arrows are visible in browsers like Chrome and Safari but are completely missing in Mozilla Firefox and sometimes Microsoft Edge.

Why It Happens: The Accordion block uses the native HTML <details> and <summary> elements. The styling of the marker (the arrow) is primarily handled by the browser itself, which can lead to inconsistent rendering across different browsers, especially older versions of Firefox.

Solution: The most reliable fix is to use custom CSS to explicitly set the icons. The method has evolved, so older CSS snippets may not work. Use the following code, replacing the content property with your desired icon (like a plus/minus sign).

.wp-block-coblocks-accordion-item__title::marker {
    content: "+ ";
    font-size: 25px;
}

.wp-block-coblocks-accordion-item[open] > .wp-block-coblocks-accordion-item__title::marker {
    content: "- ";
}

2. Accordion Collapses When Editing or Using Shortcuts

The Problem: A very common frustration in the editor is when clicking into an inner block (like a Paragraph or Button) or using a keyboard shortcut (like Ctrl+A to select text) causes the entire accordion to collapse, making editing difficult.

Why It Happens: This is typically a focus issue within the Gutenberg editor. Interactions with nested blocks can sometimes trigger the accordion's native open/close behavior.

Solution:

  1. Update Everything: First, ensure WordPress, your theme, and the CoBlocks plugin are all updated to their latest versions. Many editor quirks are resolved in updates.
  2. Conflict Test: Temporarily deactivate all other plugins and switch to a default theme (like Twenty Twenty-One). If the problem stops, reactivate your plugins one-by-one to identify the conflict.
  3. Click Carefully: Try to click directly on the text content within the inner block rather than its container.

3. Accordions Appear Fully Open in Internet Explorer and Old Edge

The Problem: The accordion block does not close properly in Internet Explorer and the legacy version of Microsoft Edge, appearing stuck open.

Why It Happens: These older browsers do not support the modern HTML5 <details> element that the block relies on.

Solution: CoBlocks includes a built-in polyfill for this exact reason. To enable it:

  1. In the editor, click on the main parent Accordion block.
  2. In the block settings on the right, look for the toggle control labeled "Add Internet Explorer & Edge support" or similar.
  3. Enable this option. This will load a necessary script to make the accordions functional in those browsers.

4. Cannot Insert Reusable Blocks or Other Block Types

The Problem: Users found that the block inserter was limited inside an accordion item, preventing them from adding Reusable Blocks or certain other block types.

The Solution: Good news! This was a software limitation that has been addressed. The CoBlocks team has lifted inner block restrictions for the Accordion block. If you are experiencing this, updating the CoBlocks plugin to the latest version should immediately resolve the issue and give you access to the full library of blocks inside your accordions.

5. Nested Accordions Not Working

The Problem: Placing an accordion block inside another accordion block can cause functionality to break, preventing content from being added or edited properly.

Why It Happens: Nesting accordions creates a complex structure that can interfere with click events and focus management. This is a known technical challenge.

Solution: This is a known bug that has been reported to the CoBlocks development team. The current recommendation is to avoid nesting accordions until a fix is implemented in a future plugin update. You can follow the progress on the official CoBlocks GitHub repository.

General Troubleshooting Tips

  • Clear Caches: After making changes or updates, clear your browser cache and any caching mechanisms on your WordPress site (plugin, server, or CDN).
  • Check the Console: If a problem persists, open your browser's developer tools (F12) and check the "Console" tab for any JavaScript errors that might point to a conflict.
  • Community Help: For persistent or unique issues, describing your problem in detail on independent forums like this one can help others offer targeted advice. Be sure to include your WordPress, theme, and plugin versions.

Most Accordion block issues can be resolved by ensuring software is up-to-date and using a small amount of custom CSS for styling. For more complex bugs, the development team is actively maintaining the plugin and addressing reported issues.

Related Support Threads Support