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