1

Имеется большой кусок текста с html-тегами.
Как сделать так, чтоб была видна только его верхняя часть (в пределах 80px), а остальная часть появлялась при нажатии на кнопку "Читать далее..." (без перезагрузки страницы)?

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

Самый подходящий вариант который был найден выглядит следующим образом:

window.onload = function() {
  blok = document.getElementById('ta');
  parent = blok.parentNode;
  blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;

  if (blok_height > 80) {
    blok.style.maxHeight = '80px';
    link = parent.getElementsByClassName('read-next')[0];
    link.style.display = 'inline';

    link.onclick = function() {

      if (blok.style.maxHeight) {
        blok.style.maxHeight = ''
        link.innerHTML = 'Скрыть';
      } else {
        blok.style.maxHeight = '80px';
        link.innerHTML = 'Читать далее...';
      }

      return false;
    }

  }
}
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>


<body>
  <div style="height:'100%'">
    <div class="ta" id="ta" style="overflow:hidden">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <br/>Minus mollitia quam, neque deleniti qui esse maiores non eveniet!
      <br/>Architecto ipsam earum labore vel, alias blanditiis quo quidem voluptatum.
      <br/>Tempora explicabo ipsa, dignissimos, architecto maiores quo hic cumque
      <br/>incidunt debitis maxime facilis iusto,
      <br/>qui ullam iure amet mollitia magnam reiciendis non a nesciunt saepe sequi laborum commodi.
      <br/>Accusantium saepe dolorum inventore commodi aut voluptatibus,
      <br/>sint sit voluptas enim numquam hic magnam nobis earum optio deserunt,
      <br/>debitis perferendis delectus eveniet odit quo recusandae necessitatibus quis labore unde!
      <br/>Quam, sed repellat magni accusamus maiores quia, explicabo atque ut libero architecto,
      <br/>numquam commodi eius quisquam ipsam! Praesentium labore animi rem deserunt soluta, illum.
      <br/>Recusandae laboriosam molestias minus, necessitatibus obcaecati ducimus unde similique architecto,
      <br/>dolorem itaque quod laborum sit repudiandae soluta ratione dolores nam consectetur reprehenderit.
      <br/>Sunt debitis, libero commodi quos accusantium officia.
    </div>
    <a class="read-next" style="display:none;" href="#">Читать далее...</a>
  </div>

  <div style="height:'100%'">
    <div class="ta" id="ta" style="overflow:hidden">
      Minus expedita mollitia quo praesentium ullam sint nostrum nesciunt dolor,
      <br/>autem cupiditate excepturi sit,
      <br/>ut sequi facilis soluta similique sunt. Eligendi, vel eveniet id nulla voluptatum iure obcaecati!
      <br/>Est, ducimus, vero. Ad vel distinctio ratione expedita saepe et quas fuga ab praesentium
      <br/>maiores quaerat atque voluptas animi rerum illo quam assumenda nihil maxime, sapiente quisquam id,
      <br/>sunt molestiae. Cupiditate aliquam qui iusto ea illo illum tempora aperiam facere iste
      <br/>aut tenetur fuga eum ut sequi, perspiciatis, fugiat veritatis.
      <br/>Repellendus magnam ducimus voluptatum tenetur nemo eius fugiat non animi fuga accusamus quasi
      <br/>sed aspernatur voluptatibus illo ab enim id neque tempore, architecto labore!
      <br/>Itaque dolorum officia asperiores quaerat quasi velit necessitatibus,
      <br/>doloribus assumenda provident aperiam, nisi voluptatem. Accusamus obcaecati,
      <br/>officia ipsum illum aliquam accusantium, quasi alias hic porro ex laboriosam nobis
      <br/>pariatur quaerat quos cumque ipsam expedita quod itaque veniam dolorem magni aliquid.
      <br/>Temporibus unde quaerat eligendi, dolor laboriosam, qui iusto consequuntur corporis
      <br/>voluptatibus sit obcaecati architecto, illum cum maiores excepturi repellendus quis.
      <br/>Minus expedita mollitia quo praesentium ullam sint nostrum nesciunt dolor,
      <br/>voluptatibus sit obcaecati architecto, illum cum maiores excepturi repellendus quis.
    </div>
    <a class="read-next" style="display:none;" href="#">Читать далее...</a>
  </div>
</body>

</html>

Можно ли в этом примере сделать чтобы "Читать далее" не отображалась, если текст помещается в 80px, а также если он уже был раскрыт?
И самое главное: как сделать автоуменьшение блока, если текст занимает меньше чем 80px?

Возможно, это уже здесь где-то обсуждалось, но я к сожалению не смог найти...

3
  • нужно чтобы для каждого блока выполнялся отдельно
    – Zhorben
    29 фев 2016 в 22:29
  • Текст внутри html это текст вашего вопроса, или что это?
    – insolor
    1 мар 2016 в 0:56
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 2 мар 2016 в 12:32

1 ответ 1

2

С помощью jQuery можете реализовать так:

$(document).ready(function() {
var p = $('.block .text p');
  for (var i = 0; i < p.length; i++) {
        if ($(p[i]).height() <= 80) $(p[i]).parent().next().remove();
  }
$('a.show').on('click', function() {
  $(this).prev().css('max-height','100%');
  $(this).remove();
});
});
.block {
  width: 200px;
}
.block .text {
  max-height: 80px;
  overflow: hidden
}
a {
  color: blue;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
  <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, incidunt consequatur unde facere odit dolorum cupiditate asperiores commodi rem quaerat doloribus excepturi architecto libero quidem vitae saepe possimus nemo minus!</p></div>
  <a class="show">Read More</a>
</div>

<div class="block">
  <div class="text"><p>Lorem ipsum dolor sit amet!</p></div>
  <a class="show">Read More</a>
</div>

<div class="block">
  <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, incidunt consequatur unde facere odit dolorum cupiditate asperiores commodi rem quaerat doloribus excepturi architecto libero quidem vitae saepe possimus nemo minus!</p>

  </div>
  <a class="show">Read More</a>

Ссылка на рабочий пример

5
  • Обратите внимание на комментарий автора под примером кода. Я вынес его отдельно из html-кода. Сможете доработать свой пример под эти требования автора?
    – VenZell
    1 мар 2016 в 6:11
  • @VenZell, обновил ответ.
    – ordman
    1 мар 2016 в 12:44
  • И он не работает, потому что тега p нет в .text... И нет стилей для класса .hide
    – VenZell
    1 мар 2016 в 12:45
  • Это я уже пофиксил)). А зачем стили для .hide?? Он как флаг используется
    – ordman
    1 мар 2016 в 12:46
  • Цитирую автора: Можно ли в этом примере сделать чтобы "Читать далее" не отображалась, если текст помещается в 80px, а также если он уже был раскрыт?
    – VenZell
    1 мар 2016 в 12:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.