Is it possible to update a page's content using only HTML and CSS without JavaScript?
I came across this tutorial, but I'm not sure if updating the page on click without JavaScript is achievable.
@keyframes hide1 {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes hide2 {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@mixin set-animation($name) {
animation: $name 200ms steps(1);
}
h1, h3, h4, p {
text-align: center;
}
h4 {
width: 400px;
margin: 1rem auto;
}
div {
width: 140px;
margin: 0 auto;
}
#click {
position: absolute;
left: -20px;
}
#single-click {
position: absolute;
cursor: pointer;
@include set-animation(hide1);
}
#single-click, #double-click {
user-select: none;
width: 135px;
height: 110px;
}
#double-click {
border: none;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folders.png");
background-size: 450px;
background-position: 301px 0;
}
#click:checked ~ #single-click {
@include set-animation(hide2);
}
#double-click:focus {
outline: 0;
}
#click:focus ~ #double-click {
background-position: 0 0;
}
#double-click:focus {
background-position: 153px 0;
}
#double-click:focus ~ p {
opacity: 1;
}
p {
opacity: 0;
}
footer {
position: fixed;
bottom: 0;
right: 0;
font-size: 13px;
background: #DDD;
padding: 5px 10px;
margin: 5px;
}<h1>CSS Double Click</h1>
<h3>Double click detection without Javascript</h3>
<div>
<input type="checkbox" id="click">
<label id="single-click" for="click"></label>
<button id="double-click"></button>
<p>You double clicked!</p>
</div>
<h4>The folder image is a button.</h4>
<h4>There is a transparent label on top of the button.</h4>
<h4>The label is attached to a checkbox.</h4>
<h4>When the label is clicked, it gains focus and the folder is opened and the checkbox is checked (or unchecked).</h4>
<h4>The checkbox triggers an animation which hides the transparent label for 200ms, allowing the button (folder image) to be clicked.</h4>
<h4>If the user clicks the button quickly enough, the button is focused, displays the full folder, and shows the success message.</h4>
<footer>
An original pen by <a href="http://codepen.io/ejsado/">Eric</a>.
</footer>If anyone can assist me with this, I would greatly appreciate it.