08.02.2023, 16:44
|
|
Новичок на форуме
|
|
Регистрация: 03.06.2022
Сообщений: 4
|
|
|
Как сделать "Показать полностью", если текст больше N символов? Уточнение по примеру
Приветствую, пользователи оставляют отзывы, порой отзыв слишком объемный и нужно пролистывать вниз довольно долго, нужно сделать, чтобы когда например более 700 символов появлялся текст "Показать полностью", при клике на текст разворачивался полный отзыв, подскажите как это реализовать.
Попробовал это решение - https://codepen.io/lutskboy/pen/bNpKRJ
есть проблема: тексты зависят от самого длинного текста, то есть если он увеличивается допустим на высоту 50px, то и другие тексты увеличиваются на столько же, как убрать эту зависимость элементов? |
|
08.02.2023, 17:49
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
|
|
08.02.2023, 19:28
|
|
Новичок на форуме
|
|
Регистрация: 03.06.2022
Сообщений: 4
|
|
вот например если второй текст маленький, то получается свободное пространство и ссылка "развернуть" не нужна, а она есть https://codepen.io/thewebm/pen/jOpoKBg |
|
08.02.2023, 20:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
читать подробнее
web-t,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.toggle_block {
float: left;
overflow: hidden;
}
.question-cont {
float: left;
margin: 50px;
width: 300px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
var a = $(".question-cont").filter(function(i, el) {
var question_info = $(".question_info", el);
el = $(".toggle_block", el);
if (el[0].scrollHeight < 90) {
question_info.remove();
return false
} else {
el.css("height", "90px");
return true
}
}),
e = $(".toggle_block"),
h = $(".info_name"),
f = ["читать подробнее", "скрыть"];
a.each(function(a, g) {
var c = $(".info_name", g);
c.click(function(b) {
b.preventDefault();
b = $(".toggle_block", g);
e.not(b).animate({
height: "90px"
}, 800, function() {
h.not(c).text(f[0])
});
var d = b[0],
a = d.clientHeight < d.scrollHeight ? d.scrollHeight + "px" : "90px";
b.animate({
height: a
},
1000,
function() {
c.text(f[+("90px" != a)])
})
})
})
});
</script>
</head>
<body>
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Тек
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
</body>
</html>
|
|
09.02.2023, 09:36
|
|
Новичок на форуме
|
|
Регистрация: 03.06.2022
Сообщений: 4
|
|
Сообщение от рони
|
web-t,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.toggle_block {
float: left;
overflow: hidden;
}
.question-cont {
float: left;
margin: 50px;
width: 300px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
var a = $(".question-cont").filter(function(i, el) {
var question_info = $(".question_info", el);
el = $(".toggle_block", el);
if (el[0].scrollHeight < 90) {
question_info.remove();
return false
} else {
el.css("height", "90px");
return true
}
}),
e = $(".toggle_block"),
h = $(".info_name"),
f = ["читать подробнее", "скрыть"];
a.each(function(a, g) {
var c = $(".info_name", g);
c.click(function(b) {
b.preventDefault();
b = $(".toggle_block", g);
e.not(b).animate({
height: "90px"
}, 800, function() {
h.not(c).text(f[0])
});
var d = b[0],
a = d.clientHeight < d.scrollHeight ? d.scrollHeight + "px" : "90px";
b.animate({
height: a
},
1000,
function() {
c.text(f[+("90px" != a)])
})
})
})
});
</script>
</head>
<body>
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Тек
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
<div class="question-cont">
<div class="toggle_block">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст
</p>
</div>
<div class="question_info">
<a class="info_name">читать подробнее</a> </div>
</div>
</body>
</html>
|
большое спасибо!
|
|
|
|
