Hello friends!
Sometimes it becomes necessary to insert a code that allows you to show or hide a layer with a picture or text by clicking on the button. And although there are many options for such a solution on the Web, most of them use Java or jquery in their mechanism.
But the problem can also be solved using regular HTML tools 🙂
-
<style>
-
.del { display: none; } -
.del:not(:checked) + label + * { display: none; } -
-
/* here we edit the button view */
-
.del:not(:checked) + label,
-
.del:checked + label { -
display: inline-block;
-
padding: 2px 10px;
-
border-radius: 2px;
-
color: #fff;
-
background: #4e6473;
-
cursor: pointer;
-
}
-
.del:checked + label { -
background: #e36443;
-
}
-
</style>
-
-
<input type="checkbox" id="raz" class="del"/>
-
<label for="raz" class="del">Show hidden text</label><div>
-
<strong>Hidden text</strong> </div>
And, in fact, the code itself example: