Hide/Reveal HTML widget - Advent Calendar use

Sean_M · November 30, 2022

Hello

I've been using a bit of html, that reveals content on click, for a while as information blocks around the platform. But had an idea of a digital advent calendar where it reveals a prize. Video demo attached and code is below (will need tweaking for your platform, e.g. host and change file paths to images).

You could have just one widget and update it each day, or set up a page with 25 and use rules to reveal the new one each day.

<style>
details {
    border: 2px solid #dc1f12;
    padding: 0.3em 0.3em 0;
    border-radius: 8px;
    font-size: 12pt;
    color:black;
    background-color:#dc1f12;
    font-family: Arial, sans-serif;
    text-align:center;
}

summary {
    font-weight: bold;
    margin: -0.3em -.3em 0em -.35em;
    padding: 0em;
    padding-left: .7em;
    color:black;
    text-align:center;
    background-color:#dc1f12;
    border-radius: 4px  4px 4px 4px;
    font-size: 13pt;
}

details[open] {
    padding: .3em;
    background-color:green;
}

details[open] summary {
    border-bottom: 2px solid #dc1f12;
    margin-bottom: .3em;
    border-radius: 4px  4px 0px 0px;
}
    summary::marker {
        color:#dc1f12;
        visibility:collapse;
    }
</style>

<details> 
    <summary title="Advent Calendar">
<br>Advent Calendar<br><img src="https://cwmtawefrog.npted.org/app/file/resource/32AC383320030A17EDDF0F6BA97E2D09966982CCCFD813B3.png" style="height:40px; width:40px;"><br>[click to reveal #1]</summary>
    <br><img src="https://cwmtawefrog.npted.org/app/file/resource/38E18D3D200306FB84273F883CDFE20208D1524C4913B76A" style="height:140px; width:140px;">
  <P>You got some chocolate!</P>
</details>