I have encountered a problem. I hope that when the text is less than five lines, the V symbol of the button will disappear, and the function of clicking the text to expand is also canceled, but when the article content exceeds 5 lines, the button will be restored to be visible and the article can be expanded by clicking the article. There are many articles, but because I just learned the program, I don’t know how to complete this effect in practice. I hope I can provide a way for me to learn. Thank you for your help!
$('.show').click(function(){
$(this).toggleClass('rotate'); // remove more button
$('.content').toggleClass('show-all'); // add class .show-all for .content when clicked on more button
});
$('.content').click(function(){
$(this).toggleClass('show-all');
}).content {
height: 110px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
}
.content.show-all{
height:auto;
overflow:visible;
text-overflow: none
}
.more {
text-align: center;
}
.show{
text-decoration: none;
color: #222;
transform:rotate(0deg);
}
.rotate{
transform: rotate(20deg)
}<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
</p>
<div class="more">
<a href="javaScript:;" class="show">V</a>
</div>
</div>