Ссылка "показать больше/меньше"

@fascio27 · Регистрация: 08.12.2015

Студворк — интернет-сервис помощи студентам

Я использую этот модуль для реализации «Показать больше/Показать меньше». Не подскажете, как сделать, чтобы ссылка "Показать еще" отображалась только если высота больше определенного числа (например, 100), а не всегда?А то даже при одной строке эта ссылка отображается, хотя это очевидно не нужно.

HTML5
1
2
3
4
5
6
7
8
9
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4">
      <div id="summary">
        <p class="collapse" id="collapseSummary">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary"></a>
      </div></div></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#summary {
  font-size: 14px;
  line-height: 1.5;
}
 
#summary p.collapse:not(.show) {
    height: 42px !important;
    overflow: hidden;
  
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}
 
#summary p.collapsing {
    min-height: 42px !important;
}
 
#summary a.collapsed:after  {
    content: '+ Read More';
}
 
#summary a:not(.collapsed):after {
    content: '- Read Less';
}

https://codepen.io/joserick/pen/ooVPwR

Добавлено через 7 минут
Что-то типа, если высота div больше, чем 100, то ссылке "Показать больше" добавить тег hidden, я просто не знаю, как это сделать((

Добавлено через 59 минут
Если добавить в css

CSS
1
2
3
a.collapsed {
  display: none;
}

а в js

JavaScript
1
2
3
4
5
const height = document.querySelector("#collapseSummary").scrollHeight;
if (height > 100) {
   const showMoreLink = document.querySelector(".collapsed");
   showMoreLink.style.display = "block";
}

То, это будет работать.
Но если у меня динамически будет загружаться какое-то кол-во таких айтемов, то как это реализовать? Например, товары в магазине, к описанию которых нужно применить что-то подобное.

@NTHing · 06.11.2022, 18:06

Всю систему возможно не понял... Вот так где-то лучше станет..?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<a
    data-content="+ Read More"
    class="collapsed"
    data-bs-toggle="collapse"
    href="#collapseSummary"
    aria-expanded="false"
    aria-controls="collapseSummary"
></a>
<style>
#summary a.collapsed:after {
        content: attr(data-content);
      }
</style>
    <script>
      window.onload = function () {
        a = document.querySelector("#summary a");
        p = document.querySelector("#summary p");
        if (p.scrollHeight < 50) {
          a.setAttribute("data-content", "");
        }
      };
    </script>

@fascio27 · 06.11.2022, 21:08 **[ТС]**

NTHing, А что в конечном итоге должно получиться, а то я как только ваш код не добавляю - не работает =)

@NTHing · 06.11.2022, 21:29

Я делал, чтобы если у

HTML5
1
<p class="collapse" id="collapseSummary">

текста было мало, то

Сообщение от fascio27

"Показать больше"

не показывалось бы.
Попробуйте текстовой рыбы меньше добавить.

@fascio27 · 06.11.2022, 21:34 **[ТС]**

NTHing, а, спасибо, с этим вроде бы получилось разобраться. Сейчас я не очень понимаю, как такое реализовать, если таких элементов, как

HTML5
1
<p class="collapse" id="collapseSummary">

будут несколько, неопределенное количество даже

@NTHing · 06.11.2022, 21:42

Сообщение от fascio27

неопределенное количество

рано, или поздно станет определённым, так? В это время и примените данный код.
Если непонятно, то лучше пример приведите.

@fascio27 · 06.11.2022, 22:44 **[ТС]**

NTHing, Да, но там применяется всегда на первый айтем, на какой бы я не тыкал, вот в чем дело

@NTHing · 06.11.2022, 23:52

Сообщение от fascio27

там применяется

там это где..?

Добавлено через 59 секунд
Нужен код. Без кода это беспредметный разговор.

@fascio27 · 07.11.2022, 12:49 **[ТС]**

NTHing, так выше же код)

@klyapa · 07.11.2022, 13:44

Не по теме:

NTHing, как-то помогал одному юзеру с обычным списком ... удалять, добавлять, формировать список ... Но у него ничего не получалось. Я пол дня ушатал, объясняя элементарные вещи. В конце оказалось, что у него подключен Bootstrap и ещё куча разного хлама с GitHub, которые, со старта, меняют html списка до неузнаваемости, что даже самих элементов списка не остаётся.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@fascio27 3 / 3 / 0 Регистрация: 08.12.2015 Сообщений: 249
	06.11.2022, 21:08 [ТС]
	NTHing, А что в конечном итоге должно получиться, а то я как только ваш код не добавляю - не работает =) 0

@fascio27 3 / 3 / 0 Регистрация: 08.12.2015 Сообщений: 249
	06.11.2022, 22:44 [ТС]
	NTHing, Да, но там применяется всегда на первый айтем, на какой бы я не тыкал, вот в чем дело 0

@fascio27 3 / 3 / 0 Регистрация: 08.12.2015 Сообщений: 249
	07.11.2022, 12:49 [ТС]
	NTHing, так выше же код) 0

@klyapa
	07.11.2022, 13:44
	Не по теме: NTHing, как-то помогал одному юзеру с обычным списком ... удалять, добавлять, формировать список ... Но у него ничего не получалось. Я пол дня ушатал, объясняя элементарные вещи. В конце оказалось, что у него подключен Bootstrap и ещё куча разного хлама с GitHub, которые, со старта, меняют html списка до неузнаваемости, что даже самих элементов списка не остаётся. 0