Accordion with collapsing siblings

Hey fellow designers!

I’ve been designing a box that should have collapsable content upon clicking an element in the top right corner. I want to apply the interaction (hide/show) to siblings, so other boxes on the page are not affected, and won’t need to create multiple of the same animations applying to individual elements.

This is all good and well, but I’m struggling with the hierarchy. I can’t think of a way the top right button can be a sibling of the content.

Here’s an example of the hierarchy:

Does anyone have a good idea on how to make this happen? Or has any examples in the showcase so I can take a look?

.box            (position:relative or anything but static)
   .bar
      .button1
   .content     (position:static)
      .collapse (position:absolute)
      .button.content-title
      .button.content-body
      .button.content-button

.collapse can be a sibling of .content but position:absolute. If you keep .content position:static (none) and position the .box, the .collapse can easily be positioned on the top right corner of .box (which is the referent because it’s the closest positioned parent).

Ah, that makes sense. I’ll give that a try. Thanks @vincent

1 Like