JSFiddle - React, Tailwind, and code Playground

by koenpunt

HTML

<script src="https://kswedberg.github.io/jquery-smooth-scroll/lib/jquery/jquery.js"></script>
<script src="https://kswedberg.github.io/jquery-smooth-scroll/src/jquery.smooth-scroll.js"></script>
<div class="modal">

  <div class="heading">
  Heading 1
  </div>
  <div class="block">
      <p>
    
    Block 1</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa animi reprehenderit sequi velit, pariatur ipsam accusamus ab! Totam sequi quo, amet rerum velit, quibusdam quis veniam repellat voluptas aliquam fuga.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa animi reprehenderit sequi velit, pariatur ipsam accusamus ab! Totam sequi quo, amet rerum velit, quibusdam quis veniam repellat voluptas aliquam fuga.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa animi reprehenderit sequi velit, pariatur ipsam accusamus ab! Totam sequi quo, amet rerum velit, quibusdam quis veniam repellat voluptas aliquam fuga.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa animi reprehenderit sequi velit, pariatur ipsam accusamus ab! Totam sequi quo, amet rerum velit, quibusdam quis veniam repellat voluptas aliquam fuga.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa animi reprehenderit sequi velit, pariatur ipsam accusamus ab! Totam sequi quo, amet rerum velit, quibusdam quis veniam repellat voluptas aliquam fuga.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa animi reprehenderit sequi velit, pariatur ipsam accusamus ab! Totam sequi quo, amet rerum velit, quibusdam quis veniam repellat voluptas aliquam fuga.</p>
  </div>
  <div class="heading">
  Heading 2
  </div>
  <div class="block">
      <p>
    
    Block 2</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa animi reprehenderit sequi velit, pariatur ipsam accusamus ab! Totam sequi quo, amet rerum velit, quibusdam quis veniam repellat voluptas aliquam fuga.Lorem ipsum dolor sit amet, consectetur adipisicing elit....

CSS

body {
  height: 2000px;
  background: linear-gradient(to top, #f00, #0ff)
}

button {
  position: fixed;
  top: 0;
}

.modal {
  top: 10%;
  left: 10%;
  position: fixed;
  width: 80%;
  height: 80%;
  background: rgba(255, 255, 255, .5);
  overflow: auto;
}

.heading {
  height: 40px;
  display: block;
  background: #f3f;
}

.block {
  background: #3f3;
  height: auto;
  max-height: 0;
  transition: max-height 300ms;
  overflow: hidden;
}

.block.open {
  max-height: 800px;
}

JavaScript

$('.heading').on('click', function(){
	var el = $(this);
  
  if(!el.next().hasClass('open')){
		$.smoothScroll({
  		scrollElement: $('.modal'),
    	 scrollTarget: el
	  });
  }
  el.next().toggleClass('open');
});