How to trigger a show or hide operation based on div size when the browser is resized
Set the max-height
to 100%
for show more and set the max-height
to 180px
when show less.
Updated JSFiddle
You don't need the overflow
to ever be shown, instead just increase the max-height
to 100%.
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"max-height": "100%"});
$("a.less").show();
$("a.more").hide();
return false;
});
I also added in some padding so you can see the text a bit easier.
Updated fiddle
This is really another question, but using innerHeight
instead of height
you can detect if the text is overflowing with the padding on window resize:
$(window).resize(function(){
if($(".info")[0].scrollHeight > $(".info").innerHeight()) {
$("a.more").show();
}
});
I also positioned the less/more button absolutely at the bottom of the info box to overlay any text that might extend into the padding:
.info-wrapper a {
left: 0; bottom: 0;
width: 100%;
background: red;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
line-height: 20px;
}
Full code is in this fiddle