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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

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

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

Реализацию сделал использую шорткод, который добавляем в файл функции своей темы (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>

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

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

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

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

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

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

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

Там чудеса: там леший бродит,

Русалка на ветвях сидит;

Там на неведомых дорожках

Следы невиданных зверей;

Избушка там на курьих ножках

Стоит без окон, без дверей;

Там лес и дол видений полны;

Там о заре прихлынут волны

На брег песчаный и пустой,

И тридцать витязей прекрасных

Чредой из вод выходят ясных,

И с ними дядька их морской;

Там королевич мимоходом

Пленяет грозного царя;

Там в облаках перед народом

Через леса, через моря

Колдун несёт богатыря;

Читать далее…

1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *