I'm working on a web application which has many dynamic modules. Inside those modules I have a text container and I can't control what the future administrator will write inside of this container.

So I've set a fixed max-height to the container and I've added a button to "read more" that will change the max-height if any user clicks on it. (and then clicks it again)

If the text is too short, obviously there shoudn't be a "read more" option as there's no more text to show.

My question is. Would it be possible to hide the button (display:none) if the text container has not reach that fixed max-height? (or make it show if the max-height is reached).

Example of the HTML:

<div class="text height">                         
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum                      
</div>
<div class="link">                
<a id="readmore" href="javascript:changeheight()">Read more</a>
</div> 

Basic CSS:

.text {
    overflow:hidden;
}
.height {
    max-height:38px;
}
.heightAuto {
    max-height:5000px;
}

and my little javascript:

function changeheight() {
        var readmore = $('#readmore');
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
        } else {
            readmore.text("Read more");
        }           

        $('.height').toggleClass("heightAuto");
    };

JSFIDDLE

I work basically with HTML and CSS and have very little knowledge of javascript/jquery, so if you think there's a turn around with just css it would be a better option for me. However any solution will be greetly apreciated.

Btw, would it be possible to make a bit of a transition when changing the height so it would look a bit more fluid? (this is me beign greedy, feel free to ignore this question if You think I went over the top asking for help).

thanks a lot in advance and excuse my poor english.

I'm working on a web application which has many dynamic modules. Inside those modules I have a text container and I can't control what the future administrator will write inside of this container.

So I've set a fixed max-height to the container and I've added a button to "read more" that will change the max-height if any user clicks on it. (and then clicks it again)

If the text is too short, obviously there shoudn't be a "read more" option as there's no more text to show.

My question is. Would it be possible to hide the button (display:none) if the text container has not reach that fixed max-height? (or make it show if the max-height is reached).

Example of the HTML:

<div class="text height">                         
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum                      
</div>
<div class="link">                
<a id="readmore" href="javascript:changeheight()">Read more</a>
</div> 

Basic CSS:

.text {
    overflow:hidden;
}
.height {
    max-height:38px;
}
.heightAuto {
    max-height:5000px;
}

and my little javascript:

function changeheight() {
        var readmore = $('#readmore');
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
        } else {
            readmore.text("Read more");
        }           

        $('.height').toggleClass("heightAuto");
    };

JSFIDDLE

I work basically with HTML and CSS and have very little knowledge of javascript/jquery, so if you think there's a turn around with just css it would be a better option for me. However any solution will be greetly apreciated.

Btw, would it be possible to make a bit of a transition when changing the height so it would look a bit more fluid? (this is me beign greedy, feel free to ignore this question if You think I went over the top asking for help).

thanks a lot in advance and excuse my poor english.

• javascript
• jquery
• html
• css

• Ty Gerwin. I apreciate the edit – Alvaro Menéndez Commented Nov 13, 2014 at 12:24

3 Answers 3

Use Below Code Working Demo Here

$(function()
 {
     var curHeight = $('.text').height();     
     if(curHeight==38)
         $('#readmore').show();
     else
         $('#readmore').hide();
 });     
function changeheight() {
        var readmore = $('#readmore');
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
        } else {
            readmore.text("Read more");
        }           

        $('.height').toggleClass("heightAuto");
    };

• You can get the Height of the div in on .ready function and pare that height with max Height. if Height is equal to max Height then we need to .show() 'read more' link or if height is not equal to max height then we can .hide() 'read more' link.

JsFiddle here

try to implement something like this:

$(document).ready(function(){
      if($( ".text" ).height() <39){
            $('#readmore').hide();// if want show this div using $( ".text" ).hide();
        }

        // hide the link using $('#readmore').hide();
  });
function changeheight() {
    var readmore = $('#readmore');
    if (readmore.text() == 'Read more') {
        readmore.text("Read less");
    } else {
        readmore.text("Read more");
    }      
    if($( ".text" ).height() >39){
        $('#readmore').show();
    }
    if($( ".text" ).height() <39){
        $('#readmore').hide();
    }
    $('.height').toggleClass("heightAuto");
};

change toggle accordingly.

i understand your English

try this on your JSFIDDLE code: htmlCode:

<div class="text height" id="text">                         
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum                      
 </div>
 <div class="link">                
      <a id="readmore" href="#" onclick="changeheight(this)">Read more</a>
 </div>    

cssCode:

.text {
    overflow:hidden;
}
.height {
    height:38px;
    overflow:hidden;
}

javascript

 $(document).ready(function(){
    $('.text').each(function(element,index){
        if($(this)[0].scrollHeight>$(this).height()){
            $(this).next().show()
        }else{
            $(this).next().hide()
        }
    })
})

function changeheight(obj) {
        var fullHeight = $(obj).parent().prev().get(0).scrollHeight        
        var readmore = $(obj);
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
            $(obj).parent().prev().data('oldHeight',$(obj).parent().prev().height())
            $(obj).parent().prev().animate({'height':fullHeight},350)
        } else {
            readmore.text("Read more");
           $(obj).parent().prev().animate({'height':$(obj).parent().prev().data('oldHeight')},350)
        }           
    };

runned Code

Note : page layout may be distorted when resized.

JSFieddle