header

Показать/скрыть длинный текст

Текст размещен в блоке с классом ".readmore_item". Изначально блоку присвоен добавочный класс ".closed" для управления отображением через css.

".readmore_item.closed" стилями ограничен по высоте (75px), видимость ограничена по высоте.
Псевдокласс ":after" добавлен для декоративного скрытия нижней части блока с текстом градиентным фоном (от прозрачного к белому)

В скрипте при клике по элементу с классом ".readmore_button": 
- ищем внутри его родительского блока текстовый блок с классом ".readmore_item". Добавляем (если нет) или удаляем (если есть) класс ".closed".
- кнопке ".readmore_button" добавляем (если нет) или удаляем (если есть) класс ".opened".
- в зависимости от наличия у ".readmore_button" класса ".opened" меняем текст на кнопке.
<div class="item">
    <div class="readmore_item closed">
        Длинный текст
    </div>
    <button class="readmore_button">
        Подробнее
    </button>
</div>

<script>
jQuery(document).ready(function($){
    $(".readmore_button").on("click", function(){
        $(this).parent().find(".readmore_item").toggleClass("closed");
        $(this).toggleClass("opened");
        if( $(this).hasClass("opened") ) { $(this).text("Скрыть"); } else { $(this).text("Подробнее"); }

    });
});
</script>
.readmore_item.closed{
position:relative;
height:75px;
overflow-y:hidden;
}

.readmore_item.closed:after{
content:'';
position:absolute;
height:60px;
bottom:0;
left:0;
right:0;
background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)
}

.readmore_item{
height:100%;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Возврат к списку