Looking to create a slider with a dropdown feature underneath

[johnmillerrep (John Miller)]

In this preview https://preview.webflow.com/preview/website-test-11?preview=5549f198856a3f7c234a02b05ff66b49
I’ve set up a slider with slides numbered 1-9. When you click on the slides it triggers a hidden div that appears beneath the slider. There is a close button in the hidden div that minimizes it.

As of now, when you click each slide they are all associated with slide 1’s hidden div, but instead I’d like there to be 9 different variations within the div that displays content that corresponds to whichever slide is being clicked. I want each slide that is clicked to replace the content from the previous slide, and ultimately, the close function I’ve enabled in the hidden div would only serve to minimize the hidden div and not be necessary to maneuver in between different slides.

I welcome any suggestions on how to do this. If you need me clarify anything let me know. Thanks!

[vincent (Vincent Bidaux)]

Hi John.

I think the block underneath SHOULD BE a part of the slide, even if it seems not to be.

You’d get a structure like this:

http://vincent.polenordstudio.fr/snap/y133c.jpg

Then you can use the same interaction on all slides to make the sub element show up, and limit it to sibling or child element.

Can you play around with this concept and maybe come back for more specific questions?

[johnmillerrep (John Miller)]

Ah this is great Vincent! hopefully it will do what I want. I will have a play around with this structure and get back with the results. Thank you

[johnmillerrep (John Miller)]

Hello again!

I played around using the limit to sibling/child concept that you mentioned, I also checked out your sandbox website examples and it doesn’t seem like that’s what i’m looking for. It seems to create problems with the slide and gets a little messy.

I’ve set up a new example (example 2) in the same preview link below

https://webflow.com/design/website-test-11#

I have it set up so that when you click on each of the three slides they are connected with the corresponding divs below. However, you are only able to see each of the slides if you click on them in order of 1-3, so if you click on them randomly it doesn’t work.

Is there a way to set it up that whichever one you click on takes precedence over the last?

[johnmillerrep (John Miller)]

I managed to figure out a solution by following this tutorial http://help.webflow.com/lesson/click-trigger-interaction

I’ll leave this preview page up with the examples https://webflow.com/design/website-test-11# incase anybody else is interested in creating something similar.