What could be causing the issue with my accordion tab not disappearing and reappearing on click in Webflow?
TL;DR
- Ensure the click trigger has both first and second click actions targeting the correct element.
- Set initial content to Display: None, and use interactions to toggle display and visibility.
- Confirm the accordion structure is correct with clear trigger and content elements.
- Eliminate conflicting or overlapping interactions and check for overflow or z-index issues.
- Disable custom code temporarily to rule out script conflicts.
If your accordion tab is not collapsing or expanding on click in Webflow, it’s typically due to issues with interaction setup, element structure, or conflicting styles. Here's how to troubleshoot and fix it.
1. Check the Click Interaction
- Go to Interactions panel (lightning icon) and check if the element trigger is set to “Mouse Click (Tap)”.
- Ensure that the interaction has both actions: First Click (show content) and Second Click (hide content).
- Double-check that the affected element is correctly selected—either a sibling or nested element in the accordion.
2. Verify Element Visibility Settings
- Ensure the collapsed content section has initial display set to Display: None.
- The first interaction should set Display to Block (or Flex/Grid depending on layout) and Opacity to 100% or use a Height animation, if preferred.
- The second interaction must reverse these settings—like setting Display: None and adjusting Opacity to 0% or height to zero.
3. Ensure Proper Structure
- Accordion structures usually include:
- Accordion Header or Trigger
- Accordion Content Panel
- The content panel must reside inside (or be a sibling of) a wrapper element that can be targeted for showing/hiding.
4. Avoid Overlapping Interactions
- If multiple interactions are applied to the same elements or nested items, they can conflict.
- Check if there are any Page Trigger or Scroll interactions also affecting display or opacity on these elements.
- Clean up or consolidate interactions where possible.
5. Review Z-Index and Overflow Settings
- If the content is expanding but not visible, it could be clipped by a parent element with overflow: hidden.
- Check that parent containers don’t have unnecessary overflow restrictions or z-index misalignment.
6. Test Without Custom Code
- If you’ve added custom JavaScript or jQuery, it could be interfering with Webflow interactions.
- Temporarily remove or comment out custom code in Page Settings or Custom Code Embed blocks and test the accordion again.
Summary
Make sure your click trigger is correctly set up with distinct first and second click actions, the target element starts hidden (Display: None), and the structure is clean with no overlapping interactions or visibility issues. This ensures your accordion panels collapse and expand as expected.