Day 24: Details 🎹

A details component contains the summary and the complete information, which could be toggled between visible and hidden states.

The example component is visible below.

A few notes about this notification component:

• CSS Variables are used for colors and spacing,
• the [open] selector is used to target opened details.

The code:

<details class="advent-details">
  <summary>Joy to the world, the Lord is come! 🎹</summary>
  <p>
    Let earth receive her King!<br>
    Let ev'ry heart prepare Him room,<br>
    and heav'n and nature sing,<br>
    and heav'n and nature sing,<br>
    and heav'n, and heav'n and nature sing.
  </p>
  <p>
    Joy to the earth, the Savior reigns!<br>
    Let men their songs employ,<br>
    while fields and floods, rocks, hills, and plains<br>
    repeat the sounding joy,<br>
    repeat the sounding joy,<br>
    repeat, repeat the sounding joy.
  </p>
  <p>
    No more let sins and sorrows grow,<br>
    nor thorns infest the ground;<br>
    He comes to make His blessings flow<br>
    far as the curse is found,<br>
    far as the curse is found,<br>
    far as, far as the curse is found.
  </p>
  <p>
    He rules the world with truth and grace,<br>
    and makes the nations prove<br>
    the glories of His righteousness<br>
    and wonders of His love,<br>
    and wonders of His love,<br>
    and wonders, wonders of His love.
  </p>
</details>

.advent-details{
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;
  --size-xmas: 1em;

  background-color: var(--color-xmas-alpha);
  color: var(--color-xmas-beta);
  padding: var(--size-xmas);
  cursor: pointer;
}

.advent-details[open] {
  color: var(--color-xmas-gamma);
}