Streaming live at 10am (PST)

Unfolding div / section


#1

Very simple question (but I have checked user materials so far) -

is there an easy way to create an element / div / section etc that horizontally ‘folds/unfolds’ on click?

I.e. say an element is three columns wide, but it’s default state is ‘folded’ so that it shows only one column on page load. When clicked, it unfolds over the content that is horizontal to it on page, to show all three columns.

So, in a three column page, a module situated page left would unfold two more columns page right, a module situated centre would unfold one column each right and left, etc.

Any thoughts? It’s a bit like a horizontal toggle function, I guess?

Thanks for tips!

John M


Here is my public share link: LINK
(how to access public share link)


#2

Interactions should be able to handle it, I tried a quick sample, it took a few steps and with some fine tuning it should work pretty well, you can preview it here, I only did the click portion on the middle section for the sample - http://3-col-unfold.webflow.io/

Here is a preview link to see the interactions https://preview.webflow.com/preview/3-col-unfold?preview=616ec668dbf5da7bfe6139f9bd43e356


#3

This is really very helpful. Thanks a lot!

Question now is, having experimented with your sample: what is the natural way to have text /revealed/ by that unfold interaction? I.e. to have a additional content in that element unfold, not just the box. In the behavior in your sample, the text frame I added next to the heading you already placed expands with the box, rather than staying in place (or being placeable ‘inside’ the piece of the box hidden at page load.

Thanks for further tips - really appreciate it very much indeed!


#4

@jmanooch - that is a good question! it may be tough to control depending on what needs to be in place, but if it just a paragraph it could be somewhat contained with a max width to keep it from growing, however if it is a more complex layout the only thing I could think of is to put another div wrapped in the colum that has the needed layout and appears when the column is clicked on. More interactions :slight_smile:


#5

Thanks Bill! This phrase “another div wrapped in the column” - is that specific technique for ‘wrapping’ overflow text?


#6

@jmanooch - check out the preview link again - there are a couple versions now, the first would just be a max width on a paragraph to contain it if it was just text, the second would be a way of displaying a new hidden DIV element within the column when it expands - this would allow you to create a completely different layout for each column depending on what you needed for content.

https://preview.webflow.com/preview/3-col-unfold?preview=616ec668dbf5da7bfe6139f9bd43e356

Thanks!~


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.