How can I control the rounding/un-rounding of corners in a Webflow accordion when it opens and closes?
- Structure your accordion with a container, toggle/header div, and content div.
- Use combo classes to style border-radius differently for open and closed states.
- Apply and remove the “open” class via click-triggered interactions to control styles and content expansion.
To control the corner rounding of a Webflow accordion when it opens or closes, you can use Webflow’s interactions combined with conditional styling on open/closed states.
1. Define the Structure of the Accordion
- Use a div block for the accordion container.
- Inside, have a header/toggle div (the part that gets clicked).
- Follow with the content div, which expands/collapses.
2. Style Closed and Open States
- Assign a rounded corner (e.g., border-radius: 8px) to the main container or toggle/header when the accordion is closed.
- When open, remove or modify that radius using style changes.
3. Set a Combo Class or Conditional Class
- Create a combo class, like
accordion-item open, that activates when the accordion is expanded. - In the Designer, style
.accordion-itemfor the closed state (with border-radius). - Then style
.accordion-item.openwith modified or removed corner radius.
4. Use Interactions to Apply the Class
Go to Interactions panel (lightning icon in the right sidebar).
Select the accordion toggle element, and set up a Mouse Click (Tap) interaction.
In the First Click:
Add a class (e.g.,
open) to the accordion wrapper.Change the border-radius using style or by swapping classes.
Expand the content using a show/hide and height animation.
In the Second Click:
Remove the
openclass.Restore the original border-radius.
Collapse the content.
5. Avoid Overlapping Radius on Multiple Accordions
- If you’re using multiple accordion items, only apply the bottom radius to the last one or modify the logic so only the last item in a list rounds the bottom when open.
- For grouped styles, consider using custom attributes or “First/Last Child” selectors if needed.
Summary
Adjust accordion corner rounding in Webflow by using combo classes that change styles (like border-radius) based on open/closed accordion states, and control the class toggling through click-triggered interactions on the toggle element.