So I have two questions concerning accordions. I used them to make detailed descriptions of the services we offer that open and close when clicking the tiles, which is mostly working fine. For some reason though, a little sliver of the accordion content div box never disappears: Imgur
Also, how would I go about making it so that when a second (and every subsequent) accordion is expanded/description viewed, the previously opened one automatically closes?
Hello!
So I have actually made some cloneable projects for accordions.
The first is one built entirely in Webflow with no code which you can view here:
The second one (which I prefer) requires Javascript and I have included a tutorial on the page as well which you can view here:
Hope this helps!
Regarding your current project, the first thing I notice is the issues with the placement of the accordion content divs. I would maybe try rethinking how to lay those out so they aren’t stretching across the page as they are now. Maybe try creating a specific div underneath the row of cards on top and use custom interactions for opening and closing the div and showing specific info relating to that card (hope that makes sense lol).
So just for reference, I literally just copy+pasted what they did in the Webflow University video (I’m very, very new to this lol). But what you have there is much, much better .
Unfortunately, I’m still confused as to how to get the accordion item contents into the middle of the page. Since it’s a part of the overarching accordion div box, the item contents box just starts in-line with that, like this:
I’m assuming there’s a simple way to get it to shift over and be offset that I’m just missing (like if you could set only the item contents in a center or right column)? Or if I just used your no-code FAQ accordion (if I was a bit more experience I’d give the other one a go, but alas) instead, would it be obvious?
Not really simple haha… the direction you’re going with laying out an accordion that way is a bit complex actually. If you are somewhat new to this I would stick to something a bit more streamline for the functionality. Just my thoughts.
I mean if you have any suggestions I’d be glad to hear them lol. I’m trying to do scrolling modals but again, not really working out. I guess the obvious option would be to just make individual pages.
Well, to do what you’re attempting would take quite a bit of time to figure out the right way to structure it. This is because you have to figure out workarounds for the content to open in one place. Not necessarily a walk in the park lol. What I would recommend is to start with basic but foundational component builds so you can grasp how things work with each other (in Webflow and super basic code like HTML and CSS). Learn about positioning and how it works etc. I mean hey sometimes jumping straight into something harder works too but I just feel like you will often times resort to looking to the forum or someone else to give you the answers, which is essentially why we are here (to help)… but all in all it doesn’t help you progress as efficiently in my opinion. Of course there will always be things we just don’t understand. All I’m saying is you should have a really good understanding of how things work in Webflow and understand what these parameters and options are actually doing before approaching something much more complex.
.