▼
Streaming live at 10am (PST)

Multi-column slider inside custom accordion

Design help Animations & Interactions
#1

Hello,
so I am new to Webflow, the page is in progress, but to the point: I made this three categories that are a custom accordion in which I placed the slider. The problem is that I whenever I click the slider arrow to see more graphics the accordion closes. I tried to change the height of the trigger I thought that if the area gets smaller anything beyond that would not be affected, but it didn’t work as well.

Any ideas how to solve that? I would really appreciate your help!

Here is my public share link: [LINK][1]

#2

Did you end up sorting this out? I checked out your link and noticed that the slider is working and that the accordion doesn’t close.

#3

No, I haven’t solved it yet. Do you have any idea how can it be done?

I came across a website that has custom accordion that includes images etc, but not the slider that has another buttons, so I am not sure how or whether it is possible to solve.

#4

Hey Lena,

I put together a quick little prototype of an accordion using a slider I’m building out right now for one of my clients. I have set the slider to hide/show when you click the accordion button, and the slider is working properly inside.

Take a look and see if this helps, if you wanted to duplicate it to get the same sort of layout you have, it should work fine - you’ll just need to re-map the interactions for each individual accordion.

edit: I broke something, let me fix the link and I’ll repost it.

#5

I forgot my slider was using some custom code, so wasn’t working in this temp project.

I just redid it using the native webflow slider similar to your structure to give you a better idea -

https://bryans-superb-project-af9bf4.webflow.io/

https://preview.webflow.com/preview/bryans-superb-project-af9bf4?utm_medium=preview_link&utm_source=designer&utm_content=bryans-superb-project-af9bf4&preview=139d5462c2ebc3c52b128b309bac3bf3&mode=preview

I have no idea why, but the hide/show button doesn’t work in the preview mode, but it does in the published link. Take a look at that first.

#6

Thank you so much! I didn’t thought about setting it with the hide/show option. I really appreciate your help a lot, I was struggling with this one so much.

In my case it also does not work on read-only link. Perhaps it will be fine with published site.
The second link that you have attached does not work.

https://preview.webflow.com/preview/project-922dd8?utm_medium=preview_link&utm_source=designer&utm_content=project-922dd8&preview=be1fe5004e5ee4c0f7757c2c8eb58b9c&mode=preview

#7

Yeah it’s super weird, I’m not sure why it’s not working in the preview. Oh well, as long as it works on the published site, that’s all that matter. Cool type on your site!