Show/Hide sections

by kthornbloom

HTML

<div class="page">

<div class="obscure-this" data-initial-visibility="large">
I don't need obscured. Yay!
</div>

<div class="obscure-this" data-initial-visibility="large">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta nobis sed nam laudantium magni esse. Atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta nobis sed nam laudantium magni esse. Atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta nobis sed nam laudantium magni esse. Atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta nobis sed nam laudantium magni esse. <br><br>Atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta nobis sed nam laudantium magni esse. Atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta nobis sed nam laudantium magni esse. Atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta nobis sed nam laudantium magni esse. Atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta nobis sed nam laudantium magni esse. Atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla asperiores, et cum numquam, quibusdam eos expedita excepturi qui natus error quas assumenda soluta...

CSS

.page {
  width: 400px;
}

.obscure-this {
  transition: .5s;
}

.now-obscured {
  position: relative;
  overflow: hidden;
}

.now-obscured[data-initial-visibility="large"] {
  max-height: 400px;
}

.now-obscured[data-initial-visibility="small"] {
  max-height: 200px;
}

.now-obscured:after {
  content:'';
  width: 100%;
  background: linear-gradient(to top, #fff 40%, rgba(255,255,255,0));
  height: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.obscure-button {
  position: absolute;
  background: #0072ba;
  bottom: 10px;
  color: #fff;
  z-index: 1;
  text-decoration: none;
  padding: .75em 2em;
  font-family: Sweetwater, Aspira, 'sans-serif';
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
}

JavaScript

window.onload = function(e){ 
var obscureElements = document.querySelectorAll('.obscure-this');
for (let i = 0; i < obscureElements.length; i++) {
	var current = obscureElements[i],
  		type = current.getAttribute('data-initial-visibility'),
      height = current.offsetHeight,
      maxHeight = '0';
  if (type == "large"){
  	maxHeight = 400
  } else if (type == "small"){
  	maxHeight = 200
  }
  if(height >= maxHeight){
  	current.classList.add('now-obscured');
    current.innerHTML = current.innerHTML+'<a href="#" class="obscure-button">Show More</a>'
  }
}

var obscureButtons = document.querySelectorAll('.obscure-button');
for(let i=0;i<obscureButtons.length;i++){
	obscureButtons[i].addEventListener('click', function(e){
  	e.preventDefault();
      var el = this,
      		realHeight = el.parentElement.scrollHeight;
      		
      el.parentElement.style.maxHeight = realHeight+'px';
      setTimeout(function(){
        el.parentElement.classList.remove('now-obscured');
        el.remove();
      }, 500)

    });
  }
}