How to trigger a show or hide operation based on div size when the browser is resized

Question

I am designing a summary container for the author page in a book publishing website. Some authors have more summary content while others have less content. I want to enable/ disable show more/less button dynamically when the height of the div container crosses a cutoff height(180px). So, it turns out to control the height of the div container dynamically (180px and original height). I need a piece of code which works perfectly in all browsers.

I have got a code implemented here:

http://jsfiddle.net/rraagghhu/9dgs6432/3/

HTML :

<div class = "container">
<div class="info-wrapper">
<div class="info">
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night @ the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009), 
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release. 
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at [email protected] or fill in the Guestbook with your feedback. You can also follow him on twitter (@chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
<a href="#" class="more">(more)</a>
<a href="#" class="less">(less)</a>
</div>

<div class = "footer"> THIS IS FOOTER </div>
</div>

CSS:

.container{
    background-color: yellow;
 }
.footer{
    background-color: yellow;
 }
 .info-wrapper {
    height: auto;
    position: relative;
    width: auto;
    padding: 0 0 2.5em 0; 
    background-color: red;
 } 
 .info {

    max-height: 180px;
    height: auto;
    width: auto;
    overflow: hidden;
    position: relative; 
    text-align: justify;
}
.info:after, .aftershadow {
    bottom: 0;
    width: auto;
    height: auto;
}

.info-wrapper a {
    left: 50%;
    position: relative;
    font: 700 .67em/1.25em Arial;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; } 

Jquery:

if($(".info")[0].scrollHeight > $(".info").height()) {
        $("a.more").show();
    }

    $("a.more").click(function(e){
        e.preventDefault();
        $(".info").css({"overflow": "visible"});
        $("a.less").show();
        $("a.more").hide();
        return false;
    });

    $("a.less").click(function(e){
        e.preventDefault();
        $(".info").css({"overflow": "hidden"});
        $("a.more").show();
        $("a.less").hide();
        return false;
    });

As you can see, the footer stays at the absolute position. If the more button is clicked, the (less) should come down, below that should come the footer. Is it possible to enable/disable the show more/less button dynamically when the browser is shrunk/expanded?

Answer 1

Set the max-height to 100% for show more and set the max-height to 180px when show less.

Updated JSFiddle

Answer 2

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