Показать сообщение отдельно
  #4 (permalink)  
Старый 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>
Ответить с цитированием