Задача следующая
Надо скрыть часть контента и развернуть по кнопке или ссылке «Читать далее», то есть чтоб изначально отображался не весь текст а только часть и по кнопке развернуть уже полностью и потом так же свернуть.
Реализация разворачивания и сворачивания контента
Реализацию сделал использую шорткод, который добавляем в файл функции своей темы (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>
Пример работы кода
У лукоморья дуб зелёный;
Златая цепь на дубе том:
И днём и ночью кот учёный
Всё ходит по цепи кругом;
Идёт направо — песнь заводит,
Налево — сказку говорит.
[content_hidden]Там чудеса: там леший бродит,
Русалка на ветвях сидит;
Там на неведомых дорожках
Следы невиданных зверей;
Избушка там на курьих ножках
Стоит без окон, без дверей;
Там лес и дол видений полны;
Там о заре прихлынут волны
На брег песчаный и пустой,
И тридцать витязей прекрасных
Чредой из вод выходят ясных,
И с ними дядька их морской;
Там королевич мимоходом
Пленяет грозного царя;
Там в облаках перед народом
Через леса, через моря
Колдун несёт богатыря;
[/content_hidden]

Огромное спасибо за полезную информацию
а как можно реализовать вот такое же раскрытие текста как на этом сайте прайс лист раскрывают? может есть плагин какой то кто так может кнопку красивую сделать и открыть и скрыть
Можно такое сделать, ну принцип такой же, основной блок с контентом заданного размера, а все что не влазит скрывается (overflow: hidden), дальше либо див, либо любой другой тег на который вешается событие click, по которому у блока с контентом меняется стиль (height: auto), к стилю можно добавить трансформацию или что-то другое, сделав плавное раскрытие.
Насчет плагинов которые делают тоже самое, сказать не могу, вроде были, попадались когдато, сейчас не вспомню