<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content_block hide">
    <p>Иногда вашей соответствующей аудитории может потребоваться запрос, который позволит им правильно взаимодействовать с вашим контентом.   Самые кликабельные слова в ваших социальных сетях могут помочь вашей аудитории узнать самые распространенные вещи на вашем сайте.</p>
    <p>Чтобы заставить множество людей использовать ваш отличный контент на вашей платформе, используйте такие ключевые слова, как например, чтобы сделать это успешно. Если вы хотите, чтобы ваши зрители реагировали и делали что-то с вашим постом, никогда не оставляйте акции или клики и используйте четкую директиву.</p>
    <p>Если ваш сайт не реагирует на мобильную платформу, вы потеряете много потенциальных клиентов, что также приведет к ухудшению вашего рейтинга. Это происходит потому, что многие потребители предпочитают использовать высокочувствительный веб-сайт и сайт, который удобен для мобильных устройств. Используйте инструменты исследования, такие как Screenfly, которые будут измерять реакцию вашего экрана.</p>
</div>

<a class="content_toggle" href="#">Подробнее</a>

body {
    font-size:14px;
    padding: 15px 20px;
}
/* Блок с текстом */
.content_block {
    overflow: hidden;
    position: relative;    
}
.content_block.hide {
    height: 300px;
}
.content_block.hide:after{
    content: "";
    display: block;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}
p {
    font-size: 16px;
    color: #777;
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1.6;
}

/* Кнопка */
.content_toggle {
    display: inline-block;
    padding: 15px 20px;
    background: #672cc5;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
    border-bottom: 3px solid #32145a;
}
.content_toggle:hover {
    color: #fff;
    background: #7c4acc;
    border-bottom: 3px solid #32145a;
}
.content_toggle:active {
    background: #34106d;
}

$(document).ready(function(){
    $('.content_toggle').click(function(){
  $('.content_block').toggleClass('hide');    
  if ($('.content_block').hasClass('hide')) {
   $('.content_toggle').html('Подробнее');
  } else {
   $('.content_toggle').html('Скрыть');
  }  
  return false;
    });    
});