How to use Jquery to dynamically hide text and add a collapse button?

user_11241725 0
Viewed 68

I have a project to achieve that when the text exceeds 5 lines, the collapse button needs to be displayed to hide the extra text! When the text is less than 5 lines, the collapse button is not displayed, but I don’t know how to accomplish this. Needs~ I hope I can get your help, thank you!

$('.show').click(function(){
  $(this).toggleClass('rotate'); 
  $('.content').toggleClass('show-all'); 
});

$('.content').click(function(){
  $('.show').toggleClass('rotate'); 
  $(this).toggleClass('show-all');
})
.content {
/*   height: auto; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;

}
.content.show-all{
  height:auto;
  overflow:visible;
  text-overflow: none;
  transition: all 2s;
}
.more {
  text-align: center;
  transition: all .2s;
}
.show{
  display: inline-block;
  text-decoration: none;
  color: #222;
  transition: all .6s;
  transform:rotate(0deg);
}

.rotate{
  transform: rotate(180deg)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt ugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  
  <div class="more">
    <a href="javaScript:;" class="show">V</a>
  </div>
</div>

css jquery javascript
1 Answers

You have to add line height for content to ccalculate the number of lines in your content

Please check following code snippet , I hope this answer will full fill your requirement

var targetElement = $('.content'); // get .content element as selector 
var clickElement = $('.more'); // get click .more element as selector 
var numberOfLines = 5; // set initial shown number of lines
var animationSpeed = 500; // set toggle animation speed of .content element 
var contentLineHeight = parseFloat(targetElement.css('line-height')); // get .content line height without px
var contentOuterHeight = parseFloat(targetElement.outerHeight()); // get .content height without px
var totalLineCount = contentOuterHeight/contentLineHeight; // calculate total number of lines of the content
var initialDisplayContentHeight = contentLineHeight * numberOfLines; // set height for 5 lines of contnent
var initialDisplayContentHeightWithPixel = initialDisplayContentHeight + 'px'; // convert into px


// set initial height of .content element, if content length is more than 5 line
if(contentOuterHeight > initialDisplayContentHeight) {
  // set height for content 
  targetElement.css('height',initialDisplayContentHeightWithPixel);
  // show .more element
  clickElement.show();
}


// show full content for .more element click (if content height is more than 5line)
clickElement.click(function(){
  // get current height of .content
  var targetDivCurrentHeight = parseFloat(targetElement.outerHeight());
  
  // add rotate class for click element
  $(this).toggleClass('rotate'); 

  // check the content linmit and show the content 
  if (targetDivCurrentHeight != initialDisplayContentHeight) {
    targetElement.animate({ height: initialDisplayContentHeight }, animationSpeed );
  } else {
    targetElement.animate({ height: contentOuterHeight }, animationSpeed );
  }
});
.content {
/*   height: auto; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-height: 16px;
  overflow: hidden;
}

.more {
  text-align: center;
  transition: all .2s;
  display: none;
}

.show{
  display: inline-block;
  text-decoration: none;
  color: #222;
  transition: all .6s;
  transform:rotate(0deg);
}

.rotate {
  transform: rotate(180deg)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt ugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  
  <div class="more">
    <a href="javascript:void(0)" class="show">V</a>
  </div>
</div>

user_30738420
Related