9 replies

Horizontal Accordion of Links

I'm working on an interface for reviewing videos: https://pairs.trwb.live. One of the UI elements I would like are buttons on the left-hand side of the screen that, when clicked, expand to a set of options.

Currently I have code like:

label:has(input:checked) ~ ul li {
  &:nth-of-type(1) {
    left: calc(1 * var(--item-width));
  }
  &:nth-of-type(2) {
    left: calc(2 * var(--item-width));
  }
  &:nth-of-type(3) {
    left: calc(3 * var(--item-width));
  }
  ⋮

label:has(input:checked) ~ ul li {
  &:nth-of-type(1) {
    left: calc(1 * var(--item-width));
  }
  &:nth-of-type(2) {
    left: calc(2 * var(--item-width));
  }
  &:nth-of-type(3) {
    left: calc(3 * var(--item-width));
  }
  ⋮

label:has(input:checked) ~ ul li {
  &:nth-of-type(1) {
    left: calc(1 * var(--item-width));
  }
  &:nth-of-type(2) {
    left: calc(2 * var(--item-width));
  }
  &:nth-of-type(3) {
    left: calc(3 * var(--item-width));
  }
  ⋮

label:has(input:checked) ~ ul li {
  &:nth-of-type(1) {
    left: calc(1 * var(--item-width));
  }
  &:nth-of-type(2) {
    left: calc(2 * var(--item-width));
  }
  &:nth-of-type(3) {
    left: calc(3 * var(--item-width));
  }
  ⋮

The problem is the elements aren't all the same width, so there's some overlap.

Can I achieve this effect without hard-coding

--item-width

--item-width

--item-width

--item-width?

Also, the effect I would really like to have is the first option appears, then the second from below that, then the third, and so on.

I guess for that I could use

animation-delay

animation-delay

animation-delay

animation-delay… I want for the expansion time to be the same regardless of how many elements there are, but I assume I could use a

calc

calc

calc

calc to work that out.

In any case, I've ported my existing code to a CodeSandbox: https://codesandbox.io/p/sandbox/folding-menu-test-vvh3q5?file=%2Fcomponents%2FFoldingMenu.module.css%3A34%2C1-44%2C1

Horizontal Accordion of Links

Similar Threads

Similar Threads

Similar Threads