Streaming live at 10am (PST)

Is there a way to create a spoiler?


#1

Loooking to create an element, clicking on that will show more elements.
What I tried to do was a dropdown menu feature, but the problem is it doesn’t move content on page - it just shows above everything.
Putting in embed code would be a solution, but I need the heading of this spoiler and its hidden content to be CMS elements.


Here is my site Read-Only: https://preview.webflow.com/preview/bk-news?utm_source=bk-news&preview=d87a8cc238949ab0bbbe98544f3e58f6
Watch the “Архив линий” page


#2

This should help https://university.webflow.com/lesson/show-hide-elements-on-click-interactions


#3

Thank you for reply.
That does answer some of my questions, but the main goal is to make the hidden content push the content below it. I need it to affect the document flow, not only displaying above it.


#4

If you want it to move content down, just put it inside of a section and set it to regular positioning. Then it will actually be above the rest of the page so when it is shown, it will automatically push it down. If you want a fixed navigation/dropdown to do that, it’s far more complex and I’ll have to think about how to do it.


#5

I’m not sure if we understood each other.

Simple div (let’s call it “D1”) with legacy interaction to change display mode on another div ('D2") below, so it does push the content down and technically works.

The problem is: I need it in each collection item, so clicking D1 in first collection item makes D2 visible only in first collection item. Right now pressing D1 in any collection item opens all the D2s for each collection item.

Check the read-only link in OP, page “Архив Линий”, first section called “Сегодня:” has a right collection list to examine.

Thanks for caring :slight_smile:


#6

You need to set the interaction to limit to nested or sibling elements to target only the related div. Not sure which you’d need to use, try both until you figure it out.

07%20PM


#7

LOL I was about to tell you it won’t work without even trying, but gave it a try and it actually worked.
Limiting to nested turns everything off, but limiting to sibling elements makes everything work right.

Thanks.