javascript - Text fade in / fade out in Div only if Div is higher then X

Question

In a forum are some quotes.

If a quote is higher / longer then 160px, a link on the bottom should be placed to expand that div.

I have this code...

CSS

.quotediv {
  max-height: 160px;
  transition:max-height 0.15s ease-out;
}

.quotediv.expand{
  max-height: 5000px !important;
  transition:max-height 0.35s ease-in-out;
}


.readmore-link{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width:100%;
  height: 20px;
  text-align: center;
  font-size: 14px;
  color: #004D8A;
  text-decoration: underline;
  padding-top:50px;
  background: transparent;
  background: linear-gradient(to bottom, rgba(245,245,245,0) 0%, #f5f5f5 70%);
  cursor: pointer;
}

.readmore-link.expand {
  position: relative;
  background-image: none;
  padding-top:10px;
  height:20px;
}

.readmore-link:after {
  content:"Click to expand";
}
.readmore-link.expand:after{
  content:"remove";
}

jQuery:

$(".readmore-link").click( function(e) {
  // record if our text is expanded
  var isExpanded =  $(e.target).hasClass("expand");
  
  //close all open paragraphs
  $(".quotediv.expand").removeClass("expand");
  $(".readmore-link.expand").removeClass("expand");
  
  // if target wasn't expand, then expand it
  if (!isExpanded){
    $( e.target ).parent( ".quotediv" ).addClass( "expand" );
    $(e.target).addClass("expand");  
  } 
});

Its working great, but the Click to expand link also comes up if the quote is smaller then 160px. How is it possible to display the link only if the div is higher?

Is it possible with pure css or do I need jquery to get the height?

I made a fiddle to show you what I mean.

Here is my Fiddle

question from:https://stackoverflow.com/questions/65641813/text-fade-in-fade-out-in-div-only-if-div-is-higher-then-x

Answer 1

So simple using jquery ,

loop on domload throw your blockquotes and remove the read more span link if height < = 160 as following :

$("blockquote").each(function(quote, index) {
    if($(this).height()<=160)
      $(this).find(".readmore-link").remove();
  })

See below Working snippet

let fixedHeight = 160;

$(function() {
  
  $("blockquote").each(function(quote, index) {
    if( $(this).height() <= fixedHeight )
      $(this).find(".readmore-link").remove();
  })
  

  $(".readmore-link").click(function(e) {
    // record if our text is expanded
    var isExpanded = $(e.target).hasClass("expand");

    //close all open paragraphs
    $(".quotediv.expand").removeClass("expand");
    $(".readmore-link.expand").removeClass("expand");

    // if target wasn't expand, then expand it
    if (!isExpanded) {
      $(e.target).parent(".quotediv").addClass("expand");
      $(e.target).addClass("expand");
    }
  });

});

.quotediv {
  max-height: 160px;
  transition: max-height 0.15s ease-out;
  position: relative;
  overflow: hidden;
  max-height: 160px;
}

.quotediv.expand {
  max-height: 5000px !important;
  transition: max-height 0.35s ease-in-out;
}

.readmore-link {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 20px;
  text-align: center;
  font-size: 14px;
  color: #004D8A;
  text-decoration: underline;
  padding-top: 50px;
  background: transparent;
  background: linear-gradient(to bottom, rgba(245, 245, 245, 0) 0%, #f5f5f5 70%);
  cursor: pointer;
}

.readmore-link.expand {
  position: relative;
  background-image: none;
  padding-top: 10px;
  height: 20px;
}

.readmore-link:after {
  content: "Click to expand";
}

.readmore-link.expand:after {
  content: "remove";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<blockquote>
  <cite>Quote from Kasper:</cite>
  <div class="quotediv">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
    exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore
    dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetu
    <span class="readmore-link"></span>
  </div>
</blockquote>

<hr>
<h1>
  Dont show expand on this small quote
</h1>

<blockquote>
  <cite>Quote from Maria:</cite>
  <div class="quotediv">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    <span class="readmore-link"></span>
  </div>
</blockquote>