Help: Show & Hide Elements on Click

[designmark]

1. I followed the guide to show elements on click, it works for the first one but when I copy and paste the “expanding section” It does not carry over the interactions.

2. how can I make the transitions smoother?

I’m having trouble with the FAQ page.

Here’s the Read link https://preview.webflow.com/preview/freshcourage?preview=af83739d437ce80a3754dbea5b37663d

---

Here is my site Read-Only: https://preview.webflow.com/preview/freshcourage?preview=af83739d437ce80a3754dbea5b37663d
(how to share your site Read-Only link)

[matthewpmunger]

The read-only link is not working. Please fix and share again. Thanks.

[designmark]

here you go https://preview.webflow.com/preview/freshcourage?preview=af83739d437ce80a3754dbea5b37663d

[matthewpmunger]

OK @designmark, I’ve got it working.

Sorry for the delayed response. It took me some time to put this together. Here are the steps to get a smoother animation.

Expanding Section <div>

• Move left/right margin to this element
• Set overflow to hidden (because of the border radius)
• Set border radius to 5px (putting it here keeps the radius visible at all times)

---

Question <div>

• Remove left/right margin

---

Answer <div>

• Remove left/right margin
• Remove padding (move to new <div>)
• Add new <div> as a child and call it something like “Answer Inner Wrapper”
• Add padding to inner wrapper
• Move <p> to be a child of the inner wrapper

---

Show Interaction

• Set trigger to “class”
• Remove hide/show animations
• Set initial state of Answer <div> to 0px height
• Add an animation for Answer <div> to auto height at .5s and inoutquad
• Set affect to “class” and “siblings”

Hide Interaction

• Remove hide/show animation
• Add an animation for Answer <div> to auto height at .5s and inoutquad
• Set affect to “class” and “siblings”

[designmark]

Thank you for taking the time to do this, I will have a go at it in the morning and let you know how it goes

[matthewpmunger]

Let me know how it goes. Happy designing!

[designmark]

I think I’ve followed it correctly, could you have at it look for me please?

I got a bit confused with hide interaction, should it be 0 or auto

[matthewpmunger]

Yep, you got it! The initial state is 0px height and then transitions to Auto height.

One missed step was changing the trigger settings to be based on the class instead of the individual element. This would save you from adding the interaction to each Question div. Another benefit is if in the future you add more Q&As the interaction will already be working with no extra work.

You can place anything you’d like inside that inner wrapping div such as icons, illustrations, media, or rich text. Flexibility going forward is always a great thing. So @designmark, are you happy with how it turned out?

[designmark]

It’s turned out a whole lot better, thank you.

I added the following settings but it stops working when I do that

[matthewpmunger]

It stops working because you have an initial state for The Answer div on both interactions that are conflicting. The Hide interaction does not need an initial state. Just a .5s transition to 0px.

[designmark]

Thanks again for your help, really appreciate it.

[matthewpmunger]

Pleasure. Happy designing!