CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CodeConnoisseur
CodeConnoisseur

Reputation: 1869

How to expand down a "Read more..." section using CSS and jQuery

I currently have a paragraph tag in html that has long text inside of it. I also have a button that when clicked should expand and retract the section of text. This is used because the text is too long so I am adding a "Read More" button to expand and show the full text. Right now I am unable to get the paragraph to expand. Instead when the button is clicked it fades into the background and never show.

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;

});

Upvotes: 0

Views: 854

Answers (2)

Twisty
Twisty

Reputation: 30883

Consider the following code example.

$(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>

You can use .animate() to animate changes with CSS. For this script, it would be best then set the height to meet that of the entire text. The scrollHeight property of the element gives us this the number of pixels that is equal to the full height of the box even though we have no overflow and the height is already set.

I use the callback option in .fadeOut() to ensure that the fade animation completes before we start a new animation to reveal the text.

I also found this article if you want to fiddle with ellipse like styling: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

Update

$(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>

Upvotes: 2

zer00ne
zer00ne

Reputation: 43880

Methods

.toggleClass('.more .less') Toggles .more and .less classes on each clicked button. When clicked the button text changes accordingly:

button.read.more Read More...

button.read.less Read Less...

.animate({height: "toggle", opacity: "toggle"}) When a button is clicked the paragraph (p.extra) that follows said button will slide up/down and fade in/out.

Demo

Note: Details commented in 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>

Upvotes: 0

Related Questions