CODEWITHSUNDEEP
javascripthtmlcss
namo
namo

Reputation: 91

"Read More" button in HTML auto hide/show

Have a look at the script:

document.querySelector('#b1').addEventListener('click', function() {
  document.querySelector('#c1').style.height = 'auto';
  this.style.display = 'none';
});

document.querySelector('#b2').addEventListener('click', function() {
  document.querySelector('#c2').style.height = 'auto';
  this.style.display = 'none';
});
body {
  font: 14px verdana;
}

#c1 {
  overflow: hidden;
  height: 5.6em;
  line-height: 1.2em;
  width: 100%;
}

#c2 {
  overflow: hidden;
  height: 5.6em;
  line-height: 1.2em;
  width: 100%;
}
<div id="c1">
  This is small para
</div>
<button id="b1">Read more</button>
<br /><br />
<div id="c2">
  There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large. There's a lot of text in this para. So the para is being very large. Hence, it will show the full text by clicking the "Read more" button! The texts are being repeated, so that para will be large.
</div>
<button id="b2">Read more</button>

For the first para, #c1 there's no need of Read more, so how can it be hidden as there is no use...?

UPDATE 1

I have no control over the text length.

Earlier, the height and width were set for just an example as 2.6em and 200px respectively, therefore I got a solution:

You can iterate over each div and check its text content. If it is less than the certain length you can hide its next element, i.e the button. In below code, you can adjust 100 to any value you want.

By Hari Das, Solution DEMO

Why Hari's solution do not match my question?

I am not giving preference to the number of characters, I am giving preference to the height of div.

Why I am giving preference to the height of the div?

If I go with Hari's solution:

Suppose there are only 3 letters on each line till the line 15, the div's height will be long and the characters length will be less than 100, so here Hari's solution will not collapse the para and no button will be shown...

Upvotes: 1

Views: 8681

Answers (1)

Hari Das
Hari Das

Reputation: 10864

You can iterate over each div and check its scrollHeight. If it is less than visible height you can hide its next element, i.e the button.

document.querySelector('#b1').addEventListener('click', function() {
  document.querySelector('#c1').style.height = 'auto';
  this.style.display = 'none';
});

document.querySelector('#b2').addEventListener('click', function() {
  document.querySelector('#c2').style.height = 'auto';
  this.style.display = 'none';
});

$(document).ready(function(){
  $( "div" ).each(function( index ) {
    if($(this)[0].scrollHeight <= $(this)[0].offsetHeight){
      $(this).next().hide();
    }
  });
});
body {
  font: 14px verdana;
}

#c1 {
  overflow: hidden;
  height: 2.6em;
  line-height: 1.2em;
  width: 200px;
}

#c2 {
  overflow: hidden;
  height: 2.6em;
  line-height: 1.2em;
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="c1">
  This is small para
</div>
<button id="b1">Read more</button>
<br /><br />
<div id="c2">
  There's lot of text in this para. So the para is being very large. Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large. There's lot of text in this para. So the para is being very large.
  Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large.
</div>
<button id="b2">Read more</button>

Upvotes: 2

Related Questions