title: Show/hide button depending on the heigth of his hidden parent
body: <p>I am a bit new to programming and this is a complicated problem for me.</p>
  
  <p>I am building a site and I am making it fully responsive (<a href="http://www.metagame.gg/champions/azir" rel="nofollow noreferrer">http://www.metagame.gg/champions/azir</a>)</p>
  
  <p>I want to display a "<em>Read more</em>" button if the content of a div is higher than 80px</p>
  
  <p>This is an example:
  <a href="https://i.stack.imgur.com/MbK5Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MbK5Q.png" alt="Divs with different height"></a>
  As we can see, the middle Div doesn't display the "<em>Read more</em>" button because there isn't more content to show. </p>
  
  <p>To do this, I use this jquery code, where .expandClicker is the class of the button.</p>
  
  <pre><code>jQuery('.expandClicker').each(function(){
    if ( jQuery(this).parent().height() &lt; 80 ) {
      jQuery(this).css({'display':'none'});
    }
  });
  </code></pre>
  
  <p>This works great, however, <strong>it can't be used when the viewport is smaller than 980px</strong> because the page changes and <strong>the parent becomes a hidden div</strong>. So the jquery code detects that the parent div height is 0px even tho it isn't, so the "<em>Read more</em>" button is never displayed.</p>
  
  <p>The page for screens smaller than 980px:
  <a href="https://i.stack.imgur.com/BgVlh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BgVlh.png" alt="minus 980px"></a></p>
  
  <p>Once the div is expanded, the "<em>Read more</em>" buttons don't appear because the parent div height was 0px.
  <a href="https://i.stack.imgur.com/egGnb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/egGnb.png" alt="expanded"></a></p>
  
  <p>Thank you very much in advance</p>