Решение, которое есть на всех сайтах, это показать и скрыть текст при нажатии. Но здесь мы создадим кнопку, где при скрытом варианте она будет одним цветом, где будет надпись, чтоб ее открыть. Как только делаем клик, надпись меняется, это чтоб закрыть, а также аналогично меняется палитра цвета и появляется материал, что изначально был скрыт.
При открытие страницы:
При клике на кнопку:
В этом варианте нужно подключить библиотеку.
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
Код
<a class="pokazat-opisaniye" href="#">Полный текст</a>
<div class="opshow-description" style="display: none;">
<p>Блок скрытого текста...</p>
</div>
CSS
Код
p {
font-size: 14px;
color: #777;
margin: 0 0 10px 0;
padding: 0
}
.pokazat-opisaniye {
display: inline-block;
padding: 15px 20px;
background: #32145A;
font-size: 16px;
text-decoration: none;
color: #ededf3;
margin-bottom: 20px;
}
.pokazat-opisaniye.open {
background: #e4970a;
color: #ededf3;
}
JS
Код
$(".pokazat-opisaniye").click(function(){
$('.opshow-description').slideToggle(300, function(){
if ($(this).is(':hidden')) {
$('.pokazat-opisaniye').html('Полный текст');
$('.pokazat-opisaniye').removeClass('open');
} else {
$('.pokazat-opisaniye').html('Скрыть текст');
$('.pokazat-opisaniye').addClass('open');
}
});
return false;
});
Здесь уже самостоятельно можно сделать красивое оформление для кнопки.
Демонстрация
