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>
|