Приветствую.
Задача: Имеется родительский блок, с фиксированной шириной. В нём блок с текстом. Количество текста можно быть разным, но если количество строк больше 4, то нужно:
- добавлять кнопку "читать далее" и при нажатии на неё заменять её "закрыть". Можно использовать одну кнопку просто текст менять, ниже сделал для примера так как смог.
- Добавлять класс к блоку с текстом.
При этом, текст можно быть перенесен на новую строку, либо автоматически (исходя из ширины блока), либо с помощью Enter'а.
Ниже привел примерный вариант, только без условия с количеством строк. Понимаю, что сделано убого, но лишь бы показать, что надо в итоге.
$(document).ready(function(){
$('.open').click(function () {
$('.cont').addClass('full');
$('.open').removeClass('visible');
$('.close').removeClass('hide');
});
$('.close').click(function () {
$('.cont').removeClass('full');
$('.open').addClass('visible');
$('.close').addClass('hide');
});
});
.wrap {
width: 350px;
padding: 10px;
background: #ccc;
margin: 50px;
}
.cont {
height: 80px;
overflow: hidden;
}
.full {
height: auto;
}
.open, .hide {
display: none;
}
.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cont">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
<span class="open visible">Читать далее</span>
<span class="close hide">Закрыть</span>
</div>