В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени.
Самый действенный метод на данный момент (использую на данной странице, пример – https://max-webs.ru/kursu/ , которая находится в ТОПе по запросу индивидуальное обучение SEO, благодаря данной технологии ).
Суть модуля заключается в использование исключительно CSS ( стили ) без использования JavaScript.
CSS поисковый робот умеет читать и текст размещенный в CSS будет проиндексирован поисковым роботом, что в дальнейшем повысит позиции сайта.
Текст скрытый посредством JavaScript поисковый робот не индексирует. Соответственно большинство решений представленных в интернете реализованы именно таким методом. Более простой, но совсем неподходящий для SEO.
Купить данный модуль можно здесь – https://max-webs.ru/p/chitat-dalee-na-chistom-css/
Бесплатные решения
HTML
<div>
<input type="checkbox" class="read-more-state" id="post-1" />
<p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>
<label for="post-1" class="read-more-trigger"></label>
</div>
<div>
<input type="checkbox" class="read-more-state" id="post-2" />
<ul class="read-more-wrap">
<li>lorem</li>
<li>lorem 2</li>
<li class="read-more-target">lorem 3</li>
<li class="read-more-target">lorem 4</li>
</ul>
<label for="post-2" class="read-more-trigger"></label>
</div>CSS
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}Другие альтернативы
Рабочие варианты представлены выше. Выбирайте под свои нужды.
