Expand and collapse Cards

Design help General
1

Hi!

I have racked my brain trying to figure this out, and hopefully you can help.

I want to be able to expand and collapse a card when you click on it.
https://www.pinterest.com/pin/230246599677331872/ see the first part of this animation for an idea of what I am trying to achieve.

I currently have everything in the collapsed version and need help to make it expanded.

Thank you.

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

2

Hello @Tess_Gadd,

I have some idea.

  1. wrap users avatars and text (which visible when block is expanded) with div
  2. make that div display:inline-block
  3. make text-block size big enough for taking full width of expanded block,
  4. use option overflow: hidden on text-block
  5. when the whole block is collapsed- text-block width going to be 0px, when block is expanded - text-block width going to be its "original size

Hope I was able to explain :smiley:

Regards,
Anna

3

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