Скрываем часть контента и разворачиваем по кнопке «читать далее» (WordPress)

Задача следующая

Надо скрыть часть контента и развернуть по кнопке или ссылке «Читать далее», то есть чтоб изначально отображался не весь текст а только часть и по кнопке развернуть уже полностью и потом так же свернуть.

Реализация разворачивания и сворачивания контента

Реализацию сделал использую шорткод, который добавляем в файл функции своей темы (functions.php)

function rain_shortcode_content($atts, $content){
$x = '';
$x .= '<div class="rain-content-main">';
$x .= '<div class="rain-content-overflow">';
$x .= $content;
$x .= '</div>';
$x .= '<div class="rain-content-next">Читать далее…</div>';
$x .= '</div>';
return $x;
}
add_shortcode('content_hidden', 'rain_shortcode_content');

Далее создаем JavaScript для обработки разворачивания и сворачивания текста

<script>

jQuery(document).ready(function ($) {
 $('.rain-content-next').click(function(){
  $('.rain-content-overflow').toggleClass('active');
  if ($('.rain-content-overflow').hasClass('active')){
   $(this).text('Свернуть');
  }else{
   $(this).text('Читать далее...');
  }
 });

});

</script>

И стили которые будут участвовать в работе

<style>

.rain-content-overflow {
 height: 0; /* начальное скрытие */
 overflow: hidden;
 position: relative;
}
.rain-content-next {
 cursor: pointer;
}
.rain-content-overflow.active {
 height: auto; /* разворачиваю при активации */
}

</style>

Пример работы кода

У лукоморья дуб зелёный;

Златая цепь на дубе том:

И днём и ночью кот учёный

Всё ходит по цепи кругом;

Идёт направо — песнь заводит,

Налево — сказку говорит.