"Show more" and "Show less" button

Design help Animations & Interactions
1

Hi! I want to build a show more/show less text-function like the one on Youtube. I’m referring to the text description beneath the video player window. There is a button “more…” and “show less”

I have tried to make an interaction to hide and show different versions of the text but had the problem that the interaction trigger affects several windows. Anyone who has an idea how to build this interaction or feature?

Kind regards,
Axel

2

Hi Axel,

I haven’t tried building these recently with IX3, but IX2 definitely can. Look up examples of interactions-based accordions in Made in Webflow, the basic approach is the same.

How you build it will depend on your design but usually I’d structure it like this;

DIV 1 - The content wrapper that you want to show more 
   DIV 2 - Your content
      ...
   DIV 3 - The "Show more" clickable trigger 
      Your "Show more" label, svg, etc.

Styles;

  • DIV 1 is position-relative
  • DIV 3 is absolute and bottom-fixed, so left right bottom are 0, top is auto.

Your interactions;

  • Starting state has DIV 1 at something like height: 200px
  • Clicking DIV 3 ( set as the trigger ) toggles DIV 1 between height: 200px and height: auto

Notes;

  • In collapsed state, I usually also have a gradient behind DIV3 to indicate that there is more unseen content
  • You likely want show/hide text within DIV 3 between expanded / collapsed states, so it indicates “Show less” when expanded.
3

Thanks! @memetican That works great but then I want to place the same component side by side in a grid. How can I prevent the trigger to affect other components when reusing the same interaction?

4

@Mollinator Please share your Webflow preview (sandbox) link so we can help you achieve the result you want. Thank you!

5

@ahmed_moeed I was just about to but then I found the solution to that part of the problem in the Webflow University section, link: Reuse interactions - Webflow University

1 Like