0

I am a bit new to programming and this is a complicated problem for me.

I am building a site and I am making it fully responsive (http://www.metagame.gg/champions/azir)

I want to display a "Read more" button if the content of a div is higher than 80px

This is an example: Divs with different height As we can see, the middle Div doesn't display the "Read more" button because there isn't more content to show.

To do this, I use this jquery code, where .expandClicker is the class of the button.

jQuery('.expandClicker').each(function(){
  if ( jQuery(this).parent().height() < 80 ) {
    jQuery(this).css({'display':'none'});
  }
});

This works great, however, it can't be used when the viewport is smaller than 980px because the page changes and the parent becomes a hidden div. So the jquery code detects that the parent div height is 0px even tho it isn't, so the "Read more" button is never displayed.

The page for screens smaller than 980px: minus 980px

Once the div is expanded, the "Read more" buttons don't appear because the parent div height was 0px. expanded

Thank you very much in advance

juan fran
  • 359
  • 3
  • 12
  • 1
    I would suggest this: For mobile view do NOT show ever "read more" and let content flow, do not limit the height. Another note: you mixed/switched IDs and classes for each id=sectionTitle, id must be unique on the page. – skobaljic Apr 25 '16 at 20:42
  • Thank you, I think that it is a very good idea. Any downside on non unique IDs? – juan fran Apr 25 '16 at 20:45

1 Answers1

0

Any downside on non unique IDs? Yes!!...

jakeboxer have answerd lt Here.

Community
  • 1
  • 1
Magnus Fohlström
  • 74
  • 1
  • 6