JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="parent">
  <div class="cont max-height">Duis arcu urna, dapibus non massa et, mollis placerat urna. Nulla aliquam purus tortor, nec sollicitudin lorem fringilla sed. Fusce volutpat suscipit tortor vel faucibus. Curabitur bibendum massa nibh, eget bibendum sem feugiat faucibus. Aenean ut fermentum neque, ut placerat turpis. Suspendisse potenti. Pellentesque convallis erat vitae consequat blandit. Cras ante elit, egestas at accumsan nec, scelerisque ut risus. Phasellus ac libero ac ante consequat iaculis. Donec nec pellentesque elit. Aliquam dictum dictum libero vel scelerisque. Proin tristique porttitor augue id cursus. Nulla aliquam pulvinar felis vel placerat.

Aenean sollicitudin, quam eu finibus sodales, augue dui condimentum arcu, ac eleifend nisl arcu quis dui. Vivamus egestas sapien felis, sit amet eleifend tellus ultricies id. Integer luctus turpis a eleifend pellentesque. Donec dui est, vehicula at eleifend quis, pharetra sed libero. Donec non arcu metus. Phasellus convallis laoreet quam vitae porta. Sed accumsan placerat lorem quis consectetur. Morbi aliquam sem nec lectus accumsan vestibulum ut ut leo. Fusce semper aliquet nibh, a fermentum metus fringilla ac. Proin id ante quis dolor egestas ornare. Suspendisse tincidunt ut justo a condimentum.

Aenean scelerisque sollicitudin tristique. Phasellus lobortis ultrices lorem a interdum. Curabitur ipsum ligula, suscipit sed nulla ut, fermentum vulputate tellus. Integer nisi felis, ullamcorper id massa ac, pulvinar interdum lorem. Integer euismod turpis quis nulla volutpat convallis. Pellentesque convallis orci et enim luctus, eget facilisis est placerat. Proin a ante vitae ligula convallis tempus nec quis sem. Suspendisse ante dui, dapibus non urna id, egestas auctor massa. Mauris vehicula consectetur arcu a tempus. Fusce accumsan lobortis justo a varius. Quisque vitae consectetur felis, sed sagittis tortor.
Aenean id sollicitudin libero. Praesent pellentesque diam cursus rhoncus vehicula. Sed...

CSS

body {
  margin: 0 auto;
  max-width: 300px;
  height: 400px;
}

.cont { color: green; }
.cont.max-height {
  max-height: 300px;
  overflow: hidden;
  color: red;
}

.btn {
  padding: 5px 10px;
  background: #555;
  color: #fff;
}

.sibling {
  color: #e1e1e1;
}

JavaScript

$('.btn').on("click", function() {
	var cont = $('.cont');
  var theClass = 'max-height';
  var expand = cont.hasClass( theClass );
  
  if ( !expand ) {
  	console.log(' COLLAPSING')
    var scrollDistance = $('body, html').scrollTop();
    var elDistance = $(this).offset().top;
		var viewportOffset = elDistance - scrollDistance;
  }
  
	var switchClass = expand ? 'removeClass' : 'addClass';
	cont[ switchClass ]( theClass );
	
  if ( !expand ) {
  	$('html, body').animate({
    	scrollTop: $(this).offset().top
    }, 0);
    $('html, body').animate({
    	scrollTop: $(this).offset().top - viewportOffset
    }, 600);
  }
  
});