javascript - Hide an element if container height is less than a fixed amount -

javascript - Hide an element if container height is less than a fixed amount -

i'm working on web application has many dynamic modules. within modules have text container , can't command future administrator write within of container.

so i've set fixed max-height container , i've added button "read more" alter max-height if user clicks on it. (and clicks again)

if text short, there shoudn't "read more" alternative there's no more text show.

my question is. possible hide button (display:none) if text container has not reach fixed max-height? (or create show if max-height reached).

example of html:

<div class="text height"> lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union 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 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 html , css , have little knowledge of javascript/jquery, if think there's turn around css improve alternative me. solution greetly apreciated.

btw, possible create bit of transition when changing height bit more fluid? (this me beign greedy, sense free ignore question if think went on top asking help).

thanks lot in advance , excuse poor english.

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 height of div in on .ready function , compare height max height. if height equal max height need .show() 'read more' link or if height not equal max height can .hide() 'read more' link.

jsfiddle here

javascript jquery html css