Hidden help is opened by mouse click.
To do this, you can make a button or select a word in the text
1. Selected text.
Yada, Yada, Yada, Yada, Yada, Yada.
Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada.
Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada.
Код:
Html
<div class="spravca">Yada, Yada, Yada, Yada, Yada, Yada. <input type="checkbox" id="hd-1" class="reference"/>
<label for="hd-1" >Help</label>
<span class="story">
Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada
Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada
</span>
<div>Css
.reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}2. A button that can be placed in any part of the content.
Yada, Yada, Yada, Yada, Yada, Yada.
Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada.
Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada.
Код:
Html is the same as in the first example.
Css
.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;
background: #F0FFF0;
padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}I wish you creative success.
