CODEWITHSUNDEEP
javascripthtmljquery
Michael Wood
Michael Wood

Reputation: 101

Animated read more / read less with a slight reveal

I'm trying to achieve a button to show/hide more of the content with simple animation. I've gotten so far searching through StackOverflow but I can't seem to figure out how to make this more dynamic so it can be used on multiple items on the same page without repeating the code.

var defaultHeight = 50; // height when "closed"
var text = jQuery(".card-body");
var textHeight = text[0].scrollHeight; // the real height of the element
var button = jQuery(".card-readmore");

text.css({
  "max-height": defaultHeight,
  "overflow": "hidden"
});

button.on("click", function() {
  var newHeight = 0;
  if (text.hasClass("active")) {
    newHeight = defaultHeight;
    text.removeClass("active");
  } else {
    newHeight = textHeight;
    text.addClass("active");
  }
  text.animate({
    "max-height": newHeight
  }, 500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc luctus lacus dolor, in sagittis massa ultrices ut. Duis tristique, metus vel sollicitudin eleifend, purus est pellentesque justo, id molestie ipsum lectus at nisl. Donec et mi sit amet nunc
    sodales porta in sed nunc. Integer sagittis, libero vitae sodales egestas, purus mauris luctus enim, ut egestas nisi nisl vitae dui. Nullam ornare, risus et aliquet posuere, odio turpis iaculis lorem, id ornare diam felis nec leo. Nam lobortis vestibulum
    purus eget bibendum. Phasellus malesuada nunc ut nisl ullamcorper, in ullamcorper diam elementum.</p>
  <p>In hac habitasse platea dictumst. Integer vitae semper augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus lorem leo, sit amet placerat lorem iaculis eu. Praesent euismod nulla nec odio varius faucibus. Proin lobortis felis
    porttitor dui malesuada, vitae imperdiet nisl convallis. Vivamus in diam eu felis eleifend fermentum.</p>
</div>
<p class="card-readmore">Read more</p>

I tried switching up the button function to use jQuery(this).on("click",... but ran into issues with the scroll height that's pulling correctly.

Upvotes: 0

Views: 227

Answers (1)

charlietfl
charlietfl

Reputation: 171700

Wrap each repeating module in a parent container. Then you can loop over those containers and isolate the instances of buttons and content that exist in that container instance.

Within the following each loop the only changes are to use jQuery(this).find(selector) for the card body and the button. All else remained the same

var defaultHeight = 50; // height when "closed"

jQuery('section').each(function() {

  var text = jQuery(this).find(".card-body");
  var textHeight = text[0].scrollHeight; // the real height of the element
  var button = jQuery(this).find(".card-readmore");

  text.css({
    "max-height": defaultHeight,
    "overflow": "hidden"
  });

  button.on("click", function() {
    var newHeight = 0;
    if (text.hasClass("active")) {
      newHeight = defaultHeight;
      text.removeClass("active");
    } else {
      newHeight = textHeight;
      text.addClass("active");
    }
    text.animate({
      "max-height": newHeight
    }, 500);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <div class="card-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc luctus lacus dolor, in sagittis massa ultrices ut. Duis tristique, metus vel sollicitudin eleifend, purus est pellentesque justo, id molestie ipsum lectus at nisl. Donec et mi sit amet
      nunc sodales porta in sed nunc. Integer sagittis, libero vitae sodales egestas, purus mauris luctus enim, ut egestas nisi nisl vitae dui. Nullam ornare, risus et aliquet posuere, odio turpis iaculis lorem, id ornare diam felis nec leo. Nam lobortis
      vestibulum purus eget bibendum. Phasellus malesuada nunc ut nisl ullamcorper, in ullamcorper diam elementum.</p>
    <p>In hac habitasse platea dictumst. Integer vitae semper augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus lorem leo, sit amet placerat lorem iaculis eu. Praesent euismod nulla nec odio varius faucibus. Proin lobortis
      felis porttitor dui malesuada, vitae imperdiet nisl convallis. Vivamus in diam eu felis eleifend fermentum.</p>
  </div>
  <p class="card-readmore">Read more</p>
</section>
<section>
  <div class="card-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc luctus lacus dolor, in sagittis massa ultrices ut. Duis tristique, metus vel sollicitudin eleifend, purus est pellentesque justo, id molestie ipsum lectus at nisl. Donec et mi sit amet
      nunc sodales porta in sed nunc. Integer sagittis, libero vitae sodales egestas, purus mauris luctus enim, ut egestas nisi nisl vitae dui. Nullam ornare, risus et aliquet posuere, odio turpis iaculis lorem, id ornare diam felis nec leo. Nam lobortis
      vestibulum purus eget bibendum. Phasellus malesuada nunc ut nisl ullamcorper, in ullamcorper diam elementum.</p>
    <p>In hac habitasse platea dictumst. Integer vitae semper augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dapibus lorem leo, sit amet placerat lorem iaculis eu. Praesent euismod nulla nec odio varius faucibus. Proin lobortis
      felis porttitor dui malesuada, vitae imperdiet nisl convallis. Vivamus in diam eu felis eleifend fermentum.</p>
  </div>
  <p class="card-readmore">Read more</p>
</section>

Upvotes: 2

Related Questions