Как развернуть раздел «Подробнее ...», используя CSS и jQuery

Question

В настоящее время у меня есть тег абзаца в html, в котором есть длинный текст. У меня также есть кнопка, которая при нажатии должна раскрывать и убирать раздел текста. Это используется, потому что текст слишком длинный, поэтому я добавляю кнопку «Подробнее», чтобы развернуть и показать полный текст. Прямо сейчас я не могу заставить абзац расширяться. Вместо этого, когда кнопка нажата, она исчезает в фоновом режиме и никогда не отображается.

HTML

  <div class="infos">
    <p class="name">Mr Big</p>
    <br>
    <p class="job">Founder & Co-Owner</p>
    <p class="read-more"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
  </div>
  <div class="button_container">
     <button class="btn2">
       <span>Read more...</span>
    </button>
</div>

CSS

.infos .read-more{
    font-size: 15px;
    font-weight: 500;
    color: rgb(230, 241, 255);
    font-style: italic;
    line-height: 1.5;
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0 auto; padding: 15px 10px;
    overflow: hidden;
    max-height: 170px;

    /* "transparent" only works here because == rgba(0,0,0,0) */
    background-image: linear-gradient(to top, transparent, #434343);
}

.btn2 {
    border: none;
    display: block;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    outline: none;
    overflow: hidden;
    position: absolute;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    background-color: #59646c;
    padding: 10px 30px;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.20);
    border-radius: 25px;
}

.btn2 span {
    position: relative;
    z-index: 1;
}

.button_container {
    position: relative;
    left: 0;
    right: 0;
    top: 30%;
}

.description, .link {
    text-align: center;
}

.btn2:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 490%;
    width: 140%;
    background: #78c7d2;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
    transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn2:hover:after {
    -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
    transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

jQuery

let $el, $ps, $up, totalHeight;

$(".btn2").click(function() {

    totalHeight = 0;

    $el = $(this);
    $p  = $el.parent();
    $up = $p.parent();
    $ps = $up.find("p:not('.read-more')");

    // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
    $ps.each(function() {
        totalHeight += $(this).outerHeight();
    });

    $up
        .css({
            // Set height to prevent instant jumpdown when max height is removed
            "height": $up.height(),
            "max-height": 9999
        })
        .animate({
            "height": totalHeight
        });

    // fade out read-more
    $p.fadeOut();

    // prevent jump-down
    return false;

});

Answer 1

Рассмотрим следующий пример кода.

$(function() {
  $(".btn2").click(function(e) {
    var self = $(this);
    var par = self.parent();
    var target = par.prev(".infos").find(".read-more");
    self.fadeOut("fast", function() {
      target.animate({
        height: target[0].scrollHeight
      }, 600);
    });
  });
});

.infos .read-more {
  font-size: 15px;
  font-weight: 500;
  color: rgb(230, 241, 255);
  font-style: italic;
  line-height: 1.5;
  position: relative;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 15px 10px;
  overflow: hidden;
  height: 170px;
  /* "transparent" only works here because == rgba(0,0,0,0) */
  background-image: linear-gradient(to top, transparent, #434343);
  text-overflow: ellipsis;
}

.btn2 {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: absolute;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  background-color: #59646c;
  padding: 10px 30px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);
  border-radius: 25px;
}

.btn2 span {
  position: relative;
  z-index: 1;
}

.button_container {
  position: relative;
  left: 0;
  right: 0;
  top: 30%;
}

.description,
.link {
  text-align: center;
}

.btn2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: #78c7d2;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn2:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infos">
  <p class="name">Mr Big</p>
  <br>
  <p class="job">Founder & Co-Owner</p>
  <div class="read-more">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt eget nullam non nisi est sit amet facilisis. Vitae purus faucibus ornare suspendisse sed nisi lacus. Ornare arcu
      odio ut sem nulla pharetra diam sit. Amet dictum sit amet justo donec enim diam vulputate. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Eget gravida cum sociis natoque penatibus. Aliquam sem et tortor consequat id porta nibh. Et
      netus et malesuada fames ac. Velit aliquet sagittis id consectetur purus ut.</p>
    <p>Arcu risus quis varius quam quisque. Faucibus purus in massa tempor nec. Sed vulputate mi sit amet mauris commodo quis. Lorem sed risus ultricies tristique. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et ligula ullamcorper malesuada
      proin libero nunc. Facilisis gravida neque convallis a. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Amet est placerat in egestas. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Porta lorem mollis aliquam ut
      porttitor leo a. Semper risus in hendrerit gravida rutrum quisque. Leo integer malesuada nunc vel risus commodo viverra maecenas. Arcu non odio euismod lacinia at quis risus sed vulputate. Donec et odio pellentesque diam volutpat commodo sed. Aliquam
      malesuada bibendum arcu vitae elementum curabitur vitae. Ut etiam sit amet nisl purus in. Massa enim nec dui nunc mattis enim ut. Donec ac odio tempor orci.</p>
    <p>Massa ultricies mi quis hendrerit dolor magna eget est. Augue interdum velit euismod in pellentesque massa placerat. Vel pharetra vel turpis nunc. Id faucibus nisl tincidunt eget nullam non. Id ornare arcu odio ut sem nulla. Tortor id aliquet lectus
      proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque. Dapibus ultrices in iaculis nunc sed augue lacus. Quis ipsum suspendisse ultrices gravida dictum. Ornare aenean euismod elementum nisi quis. Rhoncus mattis rhoncus
      urna neque viverra justo nec ultrices dui. Congue quisque egestas diam in arcu. Orci phasellus egestas tellus rutrum tellus. Nisl suscipit adipiscing bibendum est ultricies integer. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices.
      Elit at imperdiet dui accumsan sit amet. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Faucibus in ornare quam viverra.</p>
    <p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Non consectetur a erat nam at lectus urna duis. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Vel orci porta
      non pulvinar neque laoreet. Et odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing enim eu turpis egestas pretium. Nulla pellentesque dignissim enim sit amet venenatis urna. Porta non pulvinar neque laoreet suspendisse. Quam
      nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis ut diam quam nulla porttitor massa. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Fringilla urna porttitor rhoncus dolor purus non enim. Blandit turpis cursus
      in hac habitasse. Sed blandit libero volutpat sed. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.</p>
    <p>Sed risus pretium quam vulputate dignissim suspendisse in est ante. Urna cursus eget nunc scelerisque viverra mauris. Tincidunt eget nullam non nisi. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Nulla facilisi nullam
      vehicula ipsum a arcu cursus. Risus nec feugiat in fermentum posuere. Lobortis feugiat vivamus at augue eget arcu. Eget est lorem ipsum dolor. Fames ac turpis egestas sed tempus urna. Phasellus vestibulum lorem sed risus ultricies tristique. Erat
      nam at lectus urna duis convallis convallis tellus id. Non odio euismod lacinia at quis risus sed vulputate odio. Nisl nunc mi ipsum faucibus.</p>
  </div>
</div>
<div class="button_container">
  <button class="btn2">
       <span>Read more...</span>
    </button>
</div>

Вы можете использовать .animate() для анимации изменений с помощью CSS. Для этого сценария лучше всего установить высоту, соответствующую высоте всего текста. Свойство scrollHeight элемента дает нам это количество пикселей, равное полной высоте окна, даже если у нас нет переполнения, а высота уже установлена.

Я использую опцию обратного вызова в .fadeOut(), чтобы убедиться, что анимация затухания завершается до того, как мы запустим новую анимацию для раскрытия текста.

Я также нашел эту статью, если вы хотите поиграть с использованием стиля, подобного эллипсу: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

Обновление

$(function() {
  $(".btn2").click(function(e) {
    var self = $(this);
    var par = self.parent();
    var target = par.prev(".infos").find(".read-more");
    if (self.data("action") == undefined) {
      self.data({
        action: "more",
        height: target.css("height").slice(0,-2)
      });
    }
    if (self.data("action") == "more") {
      console.log("Expand to " + target[0].scrollHeight);
      target.animate({
        height: target[0].scrollHeight
      }, 600);
      self.text("Read Less...");
      self.data("action", "less");
    } else {
      console.log("Shrink to " + self.data("height"));
      target.animate({
        height: self.data("height")
      }, 600);
      self.text("Read More...");
      self.data("action", "more");
    }
  });
});

.infos .read-more {
  font-size: 15px;
  font-weight: 500;
  color: rgb(230, 241, 255);
  font-style: italic;
  line-height: 1.5;
  position: relative;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 15px 10px;
  overflow: hidden;
  height: 170px;
  /* "transparent" only works here because == rgba(0,0,0,0) */
  background-image: linear-gradient(to top, transparent, #434343);
  text-overflow: ellipsis;
}

.btn2 {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: absolute;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  background-color: #59646c;
  padding: 10px 30px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);
  border-radius: 25px;
}

.btn2 span {
  position: relative;
  z-index: 1;
}

.button_container {
  position: relative;
  left: 0;
  right: 0;
  top: 30%;
}

.description,
.link {
  text-align: center;
}

.btn2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: #78c7d2;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn2:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infos">
  <p class="name">Mr Big</p>
  <br>
  <p class="job">Founder & Co-Owner</p>
  <div class="read-more">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt eget nullam non nisi est sit amet facilisis. Vitae purus faucibus ornare suspendisse sed nisi lacus. Ornare arcu
      odio ut sem nulla pharetra diam sit. Amet dictum sit amet justo donec enim diam vulputate. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Eget gravida cum sociis natoque penatibus. Aliquam sem et tortor consequat id porta nibh. Et
      netus et malesuada fames ac. Velit aliquet sagittis id consectetur purus ut.</p>
    <p>Arcu risus quis varius quam quisque. Faucibus purus in massa tempor nec. Sed vulputate mi sit amet mauris commodo quis. Lorem sed risus ultricies tristique. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et ligula ullamcorper malesuada
      proin libero nunc. Facilisis gravida neque convallis a. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Amet est placerat in egestas. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Porta lorem mollis aliquam ut
      porttitor leo a. Semper risus in hendrerit gravida rutrum quisque. Leo integer malesuada nunc vel risus commodo viverra maecenas. Arcu non odio euismod lacinia at quis risus sed vulputate. Donec et odio pellentesque diam volutpat commodo sed. Aliquam
      malesuada bibendum arcu vitae elementum curabitur vitae. Ut etiam sit amet nisl purus in. Massa enim nec dui nunc mattis enim ut. Donec ac odio tempor orci.</p>
    <p>Massa ultricies mi quis hendrerit dolor magna eget est. Augue interdum velit euismod in pellentesque massa placerat. Vel pharetra vel turpis nunc. Id faucibus nisl tincidunt eget nullam non. Id ornare arcu odio ut sem nulla. Tortor id aliquet lectus
      proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque. Dapibus ultrices in iaculis nunc sed augue lacus. Quis ipsum suspendisse ultrices gravida dictum. Ornare aenean euismod elementum nisi quis. Rhoncus mattis rhoncus
      urna neque viverra justo nec ultrices dui. Congue quisque egestas diam in arcu. Orci phasellus egestas tellus rutrum tellus. Nisl suscipit adipiscing bibendum est ultricies integer. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices.
      Elit at imperdiet dui accumsan sit amet. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Faucibus in ornare quam viverra.</p>
    <p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Non consectetur a erat nam at lectus urna duis. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Vel orci porta
      non pulvinar neque laoreet. Et odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing enim eu turpis egestas pretium. Nulla pellentesque dignissim enim sit amet venenatis urna. Porta non pulvinar neque laoreet suspendisse. Quam
      nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis ut diam quam nulla porttitor massa. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Fringilla urna porttitor rhoncus dolor purus non enim. Blandit turpis cursus
      in hac habitasse. Sed blandit libero volutpat sed. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.</p>
    <p>Sed risus pretium quam vulputate dignissim suspendisse in est ante. Urna cursus eget nunc scelerisque viverra mauris. Tincidunt eget nullam non nisi. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Nulla facilisi nullam
      vehicula ipsum a arcu cursus. Risus nec feugiat in fermentum posuere. Lobortis feugiat vivamus at augue eget arcu. Eget est lorem ipsum dolor. Fames ac turpis egestas sed tempus urna. Phasellus vestibulum lorem sed risus ultricies tristique. Erat
      nam at lectus urna duis convallis convallis tellus id. Non odio euismod lacinia at quis risus sed vulputate odio. Nisl nunc mi ipsum faucibus.</p>
  </div>
</div>
<div class="button_container">
  <button class="btn2">
       <span>Read more...</span>
    </button>
</div>

Answer 2

Методы

.toggleClass('.more .less') Переключение .more и .less классов на каждую нажатую кнопку. При нажатии кнопки текст меняется соответственно:

button.read.more Подробнее ...

button.read.less Read Less ...

.animate({height: "toggle", opacity: "toggle"}) При нажатии кнопки абзац (p.extra), следующий за этой кнопкой, будет скользить вверх / вниз и постепенно исчезать / out.

---

Demo

Примечание: Подробности прокомментированы в демоверсии

/*
Delegate click event to all button.read 
Toggle the .more and .less classes on the clicked button.read
The p.extra that follows the clicked button.read will slide up/down and fade in/out
*/
$('.read').on('click', function() {
  $(this).toggleClass('more less').next('.extra').animate({
    height: "toggle",
    opacity: "toggle"
  });
  return false;
});

:root,
body {
  font: 500 3vw/1.45 Verdana;
  background: #fff;
}

button.read {
  font: inherit;
  width: 16ch;
  cursor: pointer;
}

button.read.more::after {
  content: ' More...'
}

button.read.less::after {
  content: ' Less...'
}

p.extra {
  display: none
}

<article>
  <h3>Mr. Big</h3>
  <p>Founder &amp; Co-Owner</p>
  <button class='read more'>Read</button>
  <p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<article>
  <h3>Mr. Small</h3>
  <p>Founder &amp; Co-Owner</p>
  <button class='read more'>Read</button>
  <p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<article>
  <h3>Ms. Big</h3>
  <p>Founder &amp; Co-Owner</p>
  <button class='read more'>Read</button>
  <p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>