Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать "Показать полностью", если текст больше N символов? Уточнение по примеру (https://javascript.ru/forum/misc/84935-kak-sdelat-pokazat-polnostyu-esli-tekst-bolshe-n-simvolov-utochnenie-po-primeru.html)

web-t 08.02.2023 16:44
Как сделать "Показать полностью", если текст больше N символов? Уточнение по примеру
 
Приветствую, пользователи оставляют отзывы, порой отзыв слишком объемный и нужно пролистывать вниз довольно долго, нужно сделать, чтобы когда например более 700 символов появлялся текст "Показать полностью", при клике на текст разворачивался полный отзыв, подскажите как это реализовать.

Попробовал это решение - https://codepen.io/lutskboy/pen/bNpKRJ

есть проблема: тексты зависят от самого длинного текста, то есть если он увеличивается допустим на высоту 50px, то и другие тексты увеличиваются на столько же, как убрать эту зависимость элементов?

рони 08.02.2023 17:49
web-t,
https://javascript.ru/forum/dom-wind...polnostyu.html

https://javascript.ru/forum/misc/590...e-s-menya.html

web-t 08.02.2023 19:28
Цитата:
Сообщение от рони (Сообщение 550558)
вот например если второй текст маленький, то получается свободное пространство и ссылка "развернуть" не нужна, а она есть https://codepen.io/thewebm/pen/jOpoKBg

рони 08.02.2023 20:48
читать подробнее
 
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>

web-t 09.02.2023 09:36
Цитата:
Сообщение от рони (Сообщение 550561)
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>
большое спасибо!


Часовой пояс GMT +3, время: 05:00.