How To Place " ...view More " Text Next To The Truncated Sentence In A Container-Javscript
I want to show a '...more' text for a long name descrition. so far I have this: HTML:
Solution 1:
Is this the result you are looking for?
$(".more").toggle(function(){
$(this).text("less..");
$('.complete').show();
}, function(){
$(this).text("more..");
$('.complete').hide();
});.wrapper {
display: flex;
align-items: flex-start;
}
.textContainer {
display: flex;
flex-direction: column;
width: 60%;
}
.complete{
display:none;
}
.more{
background:lightblue;
color:navy;
font-size:13px;
padding:3px;
cursor:pointer;
}
.teaser {
height: 20px;
overflow: hidden;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div class="wrapper">
<div class="textContainer">
<div class="teaser">text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes heretext goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes heretext goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here</div>
<div class="complete"> this is the
complete text being shown</div>
</div>
<span class="more">more...</span>
</div>
Post a Comment for "How To Place " ...view More " Text Next To The Truncated Sentence In A Container-Javscript"