Webflow toggle interactions use the Mouse Click (Tap) trigger's built-in 1st Click / 2nd Click pattern to show and hide elements. Set the target element to Height 0px with Overflow Hidden as its initial state, create a 1st Click animation that expands Height to auto and a 2nd Click animation that collapses it back. Set trigger scope to Class to make all accordion items work from one interaction setup.
Webflow Toggle Interactions: Accordions, Read More, and Show/Hide
Toggle interactions are one of the most useful patterns in Webflow — FAQ accordions, read-more buttons, expandable filters, and mobile menu alternatives all rely on the same mechanism. Webflow's Mouse Click (Tap) trigger has a built-in 1st Click / 2nd Click toggle that makes this pattern straightforward. This tutorial covers the complete accordion FAQ, a read-more paragraph reveal, and a tabbed content switcher, with attention to the common Height: auto animation limitation and how to work around it.
Prerequisites
- A Webflow project open in the Designer
- Interactions panel accessible — press H or click the lightning bolt icon
- Basic understanding of div block nesting and class names
Step-by-step guide
Structure a single accordion item
Structure a single accordion item
In the Add Elements panel (A), add a Div Block to the canvas. Give it class 'faq-item'. Inside it, add two Div Blocks: one with class 'faq-question' and one with class 'faq-answer'. Inside 'faq-question', add a Text Block for the question text and optionally a small Div Block class 'faq-icon' (add a '+' or chevron symbol). Inside 'faq-answer', add paragraph text. Style 'faq-question': Display Flex, Justify Space Between, Align Center, padding 16px, cursor pointer. Style 'faq-answer': padding 0 16px 16px, line-height 1.6.
Expected result: A visible question row with text, and an answer paragraph below it. Both are visible at this stage — you'll hide the answer in the next step.
Set the initial collapsed state on faq-answer
Set the initial collapsed state on faq-answer
Select 'faq-answer'. In Style Panel (S) → Size → Height → set to 0px. In Style Panel → Size → Overflow → set to Hidden. The answer text is now invisible and the faq-item appears as just the question row. This Height 0 + Overflow Hidden combination is the standard Webflow collapse technique — it hides the content without removing it from the DOM (unlike Display None which would break animations).
Expected result: The faq-answer content is hidden. The faq-item shows only the question row.
Create the 1st Click (open) interaction
Create the 1st Click (open) interaction
Select 'faq-question'. Go to Interactions panel (H) → Element triggers → '+ Add trigger' → 'Mouse Click (Tap)'. You will see two sections: '1st Click' and '2nd Click'. Click '1st Click' → 'Start an Animation' → '+ New Animation', name it 'FAQ Open'. In the animation timeline, click '+' to add an action. Choose the target 'Affect class: faq-answer' and enable 'Limit to sibling elements'. Set Height to 'Auto', duration 0.3s, Easing 'Ease Out'. Add a second action at the same time position: target 'faq-icon', Rotate Z to 45° (turns '+' into '×'), duration 0.3s, Ease Out. The 'Height: auto' tells Webflow to expand to the natural content height.
Expected result: Clicking the question expands the answer to its full natural height with a 0.3s ease-out animation, and the icon rotates 45°.
Create the 2nd Click (close) interaction
Create the 2nd Click (close) interaction
Still in the Mouse Click (Tap) trigger settings, click '2nd Click' → 'Start an Animation' → '+ New Animation', name it 'FAQ Close'. In the timeline, add action: target 'faq-answer' (limit to siblings). Set Height to 0px, duration 0.25s, Ease In. Add second action: target 'faq-icon', Rotate Z back to 0°, duration 0.25s, Ease In. The close animation is slightly faster than the open (0.25s vs 0.3s) — this asymmetry makes the interaction feel snappier on close, a common UX pattern.
Expected result: Clicking the question a second time collapses the answer back to Height 0 and returns the icon to its original rotation.
Apply Class scope so all FAQ items work from one interaction
Apply Class scope so all FAQ items work from one interaction
In the Interactions panel with the Mouse Click (Tap) trigger selected on 'faq-question', find the 'Trigger scope' dropdown and change it from 'This element only' to 'Class: faq-question'. Now duplicate the faq-item block (Cmd/Ctrl+D) several times to create multiple FAQ items. Each item needs its question and answer text updated, but no new interaction setup is required — the class scope handles all of them.
Expected result: All FAQ items are independently clickable. Clicking any question opens its answer; clicking again closes it. Only one interaction was set up.
Build a read-more text expand with gradient mask
Build a read-more text expand with gradient mask
Add a Div Block class 'read-more-wrap'. Inside it, add a Div Block class 'read-more-content' with your long text paragraph. Set 'read-more-content': Height 120px, Overflow Hidden. Add another Div Block class 'read-more-gradient' immediately inside 'read-more-wrap' (sibling to 'read-more-content') — set it Position Absolute, Bottom 0, Left 0, Right 0, Height 60px, Background gradient from transparent (top) to your page background color (bottom). This gradient masks the text cutoff. Add a Text Link or Button with class 'read-more-btn' containing text 'Read more'. Select 'read-more-btn' → Interactions panel → Mouse Click (Tap) → 1st Click: animate 'read-more-content' Height to Auto (0.4s Ease Out), fade out 'read-more-gradient' Opacity to 0, change button text via a Hide action on the 'Read more' text and Show action on a hidden 'Read less' text. 2nd Click: reverse.
Expected result: A truncated text block with a bottom gradient fade. Clicking 'Read more' smoothly expands the full text and fades the gradient mask. Clicking again collapses it.
Close other accordion items when one opens (exclusive accordion)
Close other accordion items when one opens (exclusive accordion)
Webflow's Classic Interactions does not natively close sibling accordion items when a new one opens. For an exclusive accordion (only one open at a time), add a custom JavaScript snippet via Page Settings. Go to Pages panel (P) → page gear icon → Before </body> Code. Paste the script below. This script adds a click listener that closes all other open FAQ items before opening the clicked one.
1// Exclusive accordion — paste in Page Settings > Before </body> Code2document.querySelectorAll('.faq-question').forEach(function(question) {3 question.addEventListener('click', function() {4 var parentItem = this.closest('.faq-item');5 document.querySelectorAll('.faq-item').forEach(function(item) {6 if (item !== parentItem) {7 var answer = item.querySelector('.faq-answer');8 var icon = item.querySelector('.faq-icon');9 if (answer) {10 answer.style.height = '0px';11 answer.style.overflow = 'hidden';12 }13 if (icon) icon.style.transform = 'rotate(0deg)';14 }15 });16 });17});Expected result: When a user opens a new FAQ item, any previously open item automatically collapses, keeping only one item open at a time.
Complete working example
1// Exclusive FAQ accordion — add to Page Settings > Before </body> Code2// Works alongside Webflow Mouse Click (Tap) interactions on .faq-question3// Closes sibling .faq-answer elements when a new .faq-question is clicked45document.querySelectorAll('.faq-question').forEach(function(question) {6 question.addEventListener('click', function() {7 var parentItem = this.closest('.faq-item');89 document.querySelectorAll('.faq-item').forEach(function(item) {10 if (item !== parentItem) {11 var answer = item.querySelector('.faq-answer');12 var icon = item.querySelector('.faq-icon');1314 if (answer && answer.style.height !== '0px') {15 // Animate close via style (Webflow interaction handles the open)16 answer.style.transition = 'height 0.25s ease-in';17 answer.style.height = answer.scrollHeight + 'px';18 requestAnimationFrame(function() {19 requestAnimationFrame(function() {20 answer.style.height = '0px';21 });22 });23 }2425 if (icon) {26 icon.style.transition = 'transform 0.25s ease-in';27 icon.style.transform = 'rotate(0deg)';28 }29 }30 });31 });32});Common mistakes
Why it's a problem: The accordion answer expands but the height is wrong — it shows only half the content or overflows
How to avoid: You animated Height to a fixed pixel value instead of 'Auto'. In the FAQ Open animation, set the Height value to 'Auto' (not a number). Webflow's interaction engine calculates the natural content height when the value is set to Auto. If you used a fixed pixel height (e.g., 200px) it will only expand to that exact amount regardless of content length.
Why it's a problem: Clicking one FAQ question opens all FAQ answers at the same time
How to avoid: The trigger scope is set to 'Class' without the 'Limit to sibling elements' restriction. In the Interactions panel, when setting the target element for the FAQ Open/Close animations, find the target selector and enable 'Limit to sibling elements'. This ensures the animation only targets the faq-answer that is a sibling of the clicked faq-question, not every faq-answer on the page.
Why it's a problem: The toggle interaction requires two clicks the first time — first click seems to do nothing
How to avoid: The interaction is starting from the 2nd Click state. This happens when the element's initial visual state matches the 2nd Click result. Ensure the faq-answer starts at Height 0px in the Style Panel (not through an interaction). The 1st Click should be the 'open' action. You can also open the interaction and swap the 1st and 2nd Click animations.
Why it's a problem: Toggle works fine on desktop but stops working after publishing
How to avoid: Custom code on the page (from an Embed or Page Head) may be conflicting with the Webflow Interactions JavaScript. Check the browser console (F12) for errors. Also verify that the page has Webflow.js loading — go to Project Settings → Integrations and confirm 'Webflow script' is enabled. If using a custom domain with a CDN, ensure the Webflow script is not being blocked.
Best practices
- Always use Height 0 + Overflow Hidden for toggle targets — never Display None, which cannot be animated
- Set the initial collapsed state (Height 0, Overflow Hidden) in the Style Panel directly, not via an interaction initial state — this ensures elements are hidden even before Webflow.js loads
- Add a visible cursor (Style Panel → Effects → Cursor → Pointer) to clickable trigger elements like faq-question to signal interactivity
- Use 'Limit to sibling elements' or 'Limit to nested elements' scope when targeting child/sibling elements — never use bare Class scope which affects all matching elements on the page
- Keep open animations slightly slower than close animations (e.g., 0.3s open, 0.25s close) for a more satisfying feel
- Add Overflow Hidden to the outer faq-item container as well, in case the faq-answer's border-radius or shadow clips unexpectedly
- Test toggle interactions on mobile touch devices — the Mouse Click (Tap) trigger works on both desktop clicks and mobile taps by design
- For CMS-driven accordions, build the structure inside a Collection List item and use class scope — all items will automatically get the interaction
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a FAQ section in Webflow using Classic Interactions. I want an accordion where clicking a question expands the answer and clicking again collapses it. Each FAQ item has a parent 'faq-item' div, a child 'faq-question' trigger, and a child 'faq-answer' target. Walk me through: setting the initial Height 0 + Overflow Hidden state, creating the 1st Click open animation with Height Auto, the 2nd Click close animation, rotating a chevron icon, and applying Class scope so all items work without duplicating the interaction.
Build a toggle accordion on elements with class 'faq-question'. 1st Click: animate sibling 'faq-answer' Height from 0px to Auto (0.3s Ease Out), rotate 'faq-icon' to 45deg. 2nd Click: animate 'faq-answer' Height to 0px (0.25s Ease In), rotate 'faq-icon' to 0deg. Set trigger scope to Class: faq-question. Initial state on faq-answer: Height 0px, Overflow Hidden (set in Style Panel, not via interaction).
Frequently asked questions
Can I make an accordion where only one item is open at a time in Webflow without code?
Not natively with Classic Interactions alone — Webflow's Mouse Click (Tap) toggle is per-element and does not have built-in awareness of sibling states. The standard solution is a small JavaScript snippet added to Page Settings → Before body tag code that listens for accordion clicks and collapses other open items. The Webflow interaction handles the open/close for the clicked item; the script handles collapsing siblings. The complete script is included in Step 7 of this tutorial.
Why is Height: Auto the recommended value instead of a specific pixel height?
Using Height: Auto tells Webflow's animation engine to expand the element to its natural content height — whatever that is at render time. This works correctly regardless of how much text is in the answer. If you hard-code a pixel value (e.g., 200px), short answers will have empty space below them and long answers will be cut off. The only caveat is that animating to 'auto' uses a JavaScript-calculated height internally, so it requires Webflow.js to be loaded on the page.
Does the Mouse Click (Tap) trigger work for both desktop clicks and mobile taps?
Yes. The Mouse Click (Tap) trigger in Webflow Interactions fires on both mouse click (desktop) and touch tap (mobile) — it is a unified pointer event. You do not need to create separate interactions for desktop and mobile. The accordion works identically on touchscreen devices. You can optionally disable the interaction on specific breakpoints using the trigger's breakpoint checkboxes if you want the accordion to behave differently on mobile.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation