How to Show and Hide Elements on Click in Webflow

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to show and hide elements on click in Webflow, using native interactions or JavaScript.

Example

Method 1: Webflow Interactions

Select the trigger button. In Interactions, create a Mouse click (tap) trigger. Add the Display action to the target element, with the Toggle option. This is the fastest method for a simple case.

Method 2: JavaScript with classList.toggle

For more complex cases (multiple elements, CSS animations), use this approach:

document.querySelector('.toggle-btn').addEventListener('click', function() {
  document.querySelector('.toggle-content').classList.toggle('visible');
  this.classList.toggle('active');
});

With the matching CSS:

.toggle-content { display: none; }
.toggle-content.visible { display: block; }
.toggle-btn.active { background: #333; color: #fff; }

Conclusion

Show/hide on click is one of the most commonly used interactions. Use cases:

• Show more details on a product card
• Show/hide an extra form
• Filter toggles on a listing page