A CSS / HTML button which when you click alternates between two different pictures

Vote count:

0

at the moment i have this code to show/hide the punchline of a joke (btw this is a joke website) i want to add a picture, but also have it alternate.

so far my code is this: HTML, the first section is the joke, the second is the punchline that shows after you click the button

<article>
<input type="checkbox" style="display:none;" id="1" role="button">
<label for="1" onclick=""><span>Show</span><span>Hide</span></label>     
<section>
joke <img src="">
</section>    
<section>
punchline
</section>
</article>

and CSS

article {
position: relative;
}

article:after { clear: both }

article section:last-of-type {
display: none;
visibility: hidden;
}

input[type=checkbox] {
border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}

[for="1"] {
position: absolute;
left:80%;
text-align: center;
padding: 2px;
box-shadow: inset 1px 1px black, inset -1px -1px black;
}

[for="1"]:hover {
background: rgba(0,0,0,.5);
color: rgb(255,255,255);
}

[for="1"] span:last-of-type {
display: none;
visibility: hidden;
}


input[type=checkbox]:checked ~ section {
display: block;
visibility: visible;
width: 100%;
}
input[type=checkbox]:checked ~ figure { width: 100% }

input[type=checkbox]:checked ~ [for="1"] span:first-of-type {
display: none;
visibility: hidden;
}

input[type=checkbox]:checked ~ [for="1"] span:last-of-type {
display: block;
        visibility: visible;
}

asked 57 secs ago

Squinty

1