Кнопка "Подробнее" ("Показать больше/скрыть")
Кнопка "Подробнее" с помощью JavaScript
С помощью данного скрипта создается кнопка "Подробнее" ("показать больше/скрыть"), которая позволяет скрывать длинный текст на веб-странице, а при необходимости открывать его. Обычно такая кнопка используется на сайтах, где публикуется много текста (блоги, новостные сайты).
Для создания такой кнопки необходимо написать следующий код:
Пример кода на JavaScript:
<script>
function readMore() {
var dots = document.getElementById("dots");
var more = document.getElementById("more");
var btn = document.getElementById("btn");
if (dots.style.display === "none") {
dots.style.display="inline";
btn.innerHTML="Подробнее";
more.style.display="none";
} else {
dots.style.display="none";
btn.innerHTML="Скрыть";
more.style.display="inline";
}
}
</script>
Пример HTML-кода:
<style>
#more {display:none;}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nostrum corporis, beatae animi cum aut sequi nam odio consequatur ipsa dicta ad quas nemo esse, a veniam. Ne<span id="dots">...</span><span id="more">cessitatibus placeat, in. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis magnam, nemo totam ipsum dolor quis recusandae, dolorem deleniti officiis perferendis, qui consectetur exercitationem! Quidem eveniet, quae ipsam unde illum provident.</span></p>
<button id="btn" onclick="readMore()">Подробнее</button>
Скопируйте данный код и вставьте в нужном месте на веб-странице между тегами <body> и </body>.
Результат работы скрипта
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nostrum corporis, beatae animi cum aut sequi nam odio consequatur ipsa dicta ad quas nemo esse, a veniam. Ne...cessitatibus placeat, in. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis magnam, nemo totam ipsum dolor quis recusandae, dolorem deleniti officiis perferendis, qui consectetur exercitationem! Quidem eveniet, quae ipsam unde illum provident.
Также можно посмотреть работу данной кнопки (плюс дополнительная стилизация) в отдельном окне.
