Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2023, 16:44
Новичок на форуме
Отправить личное сообщение для web-t Посмотреть профиль Найти все сообщения от web-t
 
Регистрация: 03.06.2022
Сообщений: 4

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

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

есть проблема: тексты зависят от самого длинного текста, то есть если он увеличивается допустим на высоту 50px, то и другие тексты увеличиваются на столько же, как убрать эту зависимость элементов?
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2023, 17:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

web-t,
https://javascript.ru/forum/dom-wind...polnostyu.html

https://javascript.ru/forum/misc/590...e-s-menya.html
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2023, 19:28
Новичок на форуме
Отправить личное сообщение для web-t Посмотреть профиль Найти все сообщения от web-t
 
Регистрация: 03.06.2022
Сообщений: 4

Сообщение от рони Посмотреть сообщение
web-t,
https://javascript.ru/forum/dom-wind...polnostyu.html

https://javascript.ru/forum/misc/590...e-s-menya.html
вот например если второй текст маленький, то получается свободное пространство и ссылка "развернуть" не нужна, а она есть https://codepen.io/thewebm/pen/jOpoKBg
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2023, 20:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

читать подробнее
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>
Ответить с цитированием
  #5 (permalink)  
Старый 09.02.2023, 09:36
Новичок на форуме
Отправить личное сообщение для web-t Посмотреть профиль Найти все сообщения от web-t
 
Регистрация: 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>
большое спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно разместить картинки на странице? Ivan65913 (X)HTML/CSS 8 09.08.2022 17:39
А где сказано, что ::before нельзя выделять? voraa (X)HTML/CSS 7 24.11.2021 21:42
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Как сделать так, чтобы текст в ячейке переносился? webpuper ExtJS 4 06.09.2011 14:46
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 17:02