Question

I have a div with ul inside it. ul can contain an unknown number of elements. Each element can contain different amounts of content. It can be long or short lines of text.

Example: http://codepen.io/anon/pen/Augrd

This DIV when the page is loaded should not be more than 100px in height.

What I want to achieve: if inside this DIV is too much content and it is overflowed, then I want to display the link on which the user can click and “open” this DIV making it more in height.

Answer 1

This detects the natural height of your <div> and automatically generates a “More…” link when the natural height of the <div> is greater than its current height (it does not show one if 100px is enough to show all the contents). You do not have to adjust the javascript for different heights of the <div>.

DEMO

Javascript

var main = document.getElementById("main");
var original_height = main.offsetHeight;
main.style.height = 'auto';
var natrual_height = main.offsetHeight;
main.style.height = original_height+"px";;
var more = document.getElementById("more");
if (natrual_height > original_height) {
  more.innerHTML = '<a href="javascript:void(0)" onClick="show_more()">More...</a>';
}
function show_more() {
  if (main.offsetHeight < natrual_height) {
      main.style.height = 'auto';
      more.innerHTML = '<a href="javascript:void(0)" onClick="show_more()">Less...</a>';
  } else {
      main.style.height = original_height+"px";;
      more.innerHTML = '<a href="javascript:void(0)" onClick="show_more()">More...</a>';
  }
}

HTML

<div id="main" class="main">
<ul>
  <li>Something</li>
  <li>LoremLoremLoremLoremLoremLoremLorem</li>
  <li>Ipsum</li>
  <li>1234</li>
 <li>LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</li>
  <li>5678</li>
  <li>111111</li>
  <li>abc</li>
</ul>
</div>
<div id="more">

</div>

CSS

.main {
  height: 100px;
  overflow: hidden;
}