1. When something was hidden and expand, or when something that was compact expands more, you want what’s underneath to be pushed down—rather than being covered—by the newly shown content, right?
That’s simple. I’m not going to talk about Webflow—as I couldn’t find any example of what you’re talking about in your shared site—but about principles of HTML, and you should be able to easily apply that to Webflow or any other front end development method.
If you make an interaction targeting an element for it to expand, from zero or a given value, to another, bigger value—let’s say from 200px to 700px—it will naturally pushes everything that is under down below, as you would like it to, under the following conditions:
- the element is Position _auto, static or relative
- none of the parents of the element have a given height (a height set to a fixed value), but instead have a height set to auto
That’s quite simple: the element will expand in height, and as all its parents are auto in height, they cill expand with it, pushing everything under, in what we call the HTML flow of elements.
However, this behavior will not happen if:
- any of the element parent have a given height
- the element is set to position:absolute of fixed
If a parent of the element has a height, either he content of the element will go out of it and mix with everything under, or it won’t show up at all if the parent has overflow:hidden
An element that is either fixed or absolute is out of the flow of the elements and can’t possibly pushes anything in any direction. It’s flying over, under or in between things like a ghost in the limbs.
2. If one testimonial is opened and another is clicked, how do I make it close the other open testimonial and open the one they clicked.
First, you need to name your testimonials elements, the element that is going to expand, with the same name.
Then you need one open interaction that is LOCAL, that’s limited to the testimonial you’re on, and only opening the testimonial you’re on. So you need to carefully chose your trigger element for it to be either a UNQUE PARENT or a SIBLING of the testimonial expanding element, because on Webflow you can only limit to SIBLINGS and NESTED (children).
Then, your interaction should start with a first step of closing all testimonials elements, with no limitation.
Your interaction will then do this:
- I CLOSE ALL THE TESTIMONIALS SO IN CASE ONE IS OPEN THEN IT WILL CLOSE!
- NOW I OPEN ONLY THE LOCAL TESTIMONIAL!
(yes, in my imagination, interactions shout things very loud when they do it)