Home/ Questions/Q 9171023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T16:06:25+00:00

I have a div containing simple text. I should show only 3 lines of

  • 0

I have a div containing simple text. I should show only 3 lines of that text with showMore link. on clicking of showMore link I need to show all the text inside it with showLess link. Right now I am using overflow property to achieve this. But have a small problem that I should show "showMore" link immediately after the text. So how can I position the hyperlink inside the text?

My Code

 jQuery(document).ready(function () {
    jQuery('.showMore').click(function (event) {
        var contentDiv = jQuery('.contentDiv');
        contentDiv[0].style.height = 'auto';
        jQuery(event.target).hide();
        jQuery('.showLess').show();
    });
    jQuery('.showLess').click(function (event) {
        var contentDiv = jQuery('.contentDiv');
        var lineHeight = getLineHeight(contentDiv[0]);
        contentDiv[0].style.height = lineHeight * 3 + 'px';
        jQuery(event.target).hide();
        jQuery('.showMore').show();
    });
});


<!doctype html>
    <html>

    <body >
<div>
<div class = "contentDiv">
some content <br r1<br> r2<br> r3 <br> r4<br> r5
    </div>      
<a href = '#'  class = "showMore">Show More</a>
<a href = '#'  class = "showLess">Show Less</a>     
</div>
    </body>
    </html>


.contentDiv a {
    float : right;
 }
.contentDiv {
    overflow: hidden;
    height:3.6em;
    background:#ccc;
font-size : 12pt ;
    font-family :Courier;
 }
.showMore {
    float: right;
}
.showLess {
    position: relative;
    float: right;
    display : none;
margin-bottom : 5px
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just one of the million ways you could achieve this: fiddle

    HTML

    <div id="text">Lots of text..</div>
<a href="#" id="showmore">Show More</a>
<a href="#" id="showless">Show Less</a>

    CSS

    #text {height:55px;overflow:hidden;}
#showless {display:none;}

    jQuery

    $('#showmore').on('click', function(e){
    $('#text').css('overflow', 'visible').css('height', 'auto');
    $('#showless').show();
    $(this).hide();
    e.preventDefault();
});

$('#showless').on('click', function(e){
    $('#text').css('overflow', 'hidden').css('height', '55px');
    $('#showmore').show();
    $(this).hide();
    e.preventDefault();
});

    To position the ‘show more’ in the bottom right (as requested in your follow-up comment), put the <a> tag inside the div and position it absolutely. Fiddle

    HTML

    <div id="text">Lots of text..
    <a href="#" id="showmore">Show More</a>
</div>
<a href="#" id="showless">Show Less</a>

    CSS

    #text {height:55px;overflow:hidden;position:relative;}
#showmore {position:absolute;bottom:0;right:0;background:#fff;padding-left:10px;}
#showless{display:none;}
    • 0