Show/Hide a part of a text

by Naeel Maqsudov

HTML

<p class="cut">начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало начало <label><input type="checkbox"><a class="switch">Читать далее &gt;&gt;&gt;</a><span>продолжение продолжение продолжение продолжение продолжение продолжение продолжение продолжение продолжение продолжение продолжение продолжение <a class="switch">&lt;&lt;&lt;</a></span></label>

<p class="cut">другое начало другое начало другое начало другое начало другое начало другое начало другое начало <label><input type="checkbox"><a class="switch">Читать далее &gt;&gt;&gt;</a><span>другое продолжение другое продолжение другое продолжение другое продолжение другое продолжение другое продолжение <a class="switch">&lt;&lt;&lt;</a></span></label>

CSS

.cut>label>input{display:none}
.cut .switch{color:blue;text-decoration:underline}
.cut>label>input:checked+a{display:none}
.cut>label>input:not(checked)+a+span{display:none}
.cut>label>input:checked+a+span{display:inline}