CMS Accordion + Images Initial State Webflow

Hello everyone! In today's guide, I'll walk you through the process of creating a dynamic accordion in Webflow with CMS collections. Not only that, but we'll also dive into some advanced JavaScript functionalities that enhance user experience.
🕐 TABLE OF CONTENTS:
00:00 Intro
00:44 Project overview
01:06 Basic setup CMS
09:00 Styling accordion
11:49 Interactions accordion
16:05 Adding images
20:41 Interactions images
23:00 JS - open first card on page load
24:50 JS - resize images based on Viewport width
From having one card open by default to ensuring cards auto-close when another is clicked, to resizing absolute positioned images - we're covering it all! If you're keen on mastering accordions in Webflow with a sprinkle of advanced JavaScript, this tutorial is for you.
🔔 Found this helpful? Give a thumbs up, share, and don't forget to subscribe for more Webflow insights!

[@gogoleway]

thank you for the tutorial, you're doing great job

[@alyssa_bananas]

Thanks for this! Do you have a cloneable we can use?

[@janiswatson7833]

Hello Max. Thank you so much for this nice video tutorial. Could you tell me how to create accordions CMS Collections 1.49 seconds.

[@decimalflamingo]

Of course. I will explain it in my next video how to create the CMS collection for the accordion and out of this creating stand-alone pages automatically.

[@itexpert2613]

There is one issue in accordions. If I open the accordion from top to bottom then the image changes fine but if I click on the other accordion from below to top then the image does not change.

[@decimalflamingo]

Hi, the behaviour you experience can happen if the second click trigger is not properly set up. If it works from top to bottom, then it is only overlaying each element. What you want is to hide the image on the next click, though. To achieve this, set each image opacity on the second click trigger interaction to zero. I hope this could solve your issue.