Back to Community
Home / Community / Plugin → Page builder gutenberg blocks – coblocks

How to Add Smooth Animations to Your CoBlocks Accordion

10 threads Sep 9, 2025 Plugin → Page builder gutenberg blocks – coblocks

Content

Many users of the Page Builder Gutenberg Blocks – CoBlocks plugin want to add smooth opening and closing animations to their Accordion blocks for a more polished user experience. While the block doesn't include this functionality by default, it can be achieved with some custom CSS.

Why Aren't Transitions Included by Default?

The CoBlocks Accordion block is built using traditional HTML <details> and <summary> elements. This approach is highly reliable and accessible because it doesn't rely on JavaScript. However, this also means that complex animations and transitions, which typically require JavaScript, are not part of the core feature set.

Adding a Basic CSS Transition

You can implement a simple height-based animation using CSS. The following code snippet provides a starting point. Add this to your site by navigating to Appearance → Customize → Additional CSS.

details {
  transition: height 1s ease;
  -webkit-transition: height 1s ease; /* Vendor prefix for broader browser support */
  -moz-transition: height 1s ease; /* Vendor prefix for broader browser support */
}
details:not([open]) { 
  height: 54.5px; 
}
details[open] { 
  height: 120px; 
}

Important Note: You will need to adjust the pixel values for the height properties (54.5px and 120px in the example) to match the specific content in your accordion items. The closed height (details:not([open])) should be the height of your summary title. The open height (details[open]) needs to be large enough to contain your expanded content.

The Limitation of a Pure CSS Solution

The main caveat with this method is that it uses a fixed height. If the content inside your accordion items varies significantly in length, a fixed pixel value will not work well. A very long item will be cut off, and a short item will have unnecessary empty space. A truly fluid animation that adapts to any content height would require custom JavaScript, which is beyond the scope of typical CSS modifications.

Conclusion

While the CoBlocks Accordion block prioritizes accessibility and reliability with its no-JavaScript approach, you can still enhance it with basic CSS transitions. For fixed-height content, the provided CSS is an effective solution. For dynamic content heights, a more advanced JavaScript implementation would be necessary.

Related Support Threads Support