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