Jump to content

Hide/Reveal HTML widget - Advent Calendar use


Sean_M

Recommended Posts

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>

 

2022-11-30 11-44-52.mkv

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...