JSFiddle - React, Tailwind, and code Playground

HTML

<body>

					<div class="menu">
						<div class="ele">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. <div class="button">+</div>
						<div class="other">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> </div>

						<div class="ele">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. <div class="button">+</div>
						<div class="other">4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> </div>

						<div class="ele">5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. <div class="button">+</div>
						<div class="other">6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> </div>

						<div class="ele">7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. <div...

CSS

.menu {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 600px;
  border: 1px solid red; }
  .menu .ele {
    height: auto;
    width: 96%;
    overflow: hidden;
    background-color: yellow;
    border: 1px solid black;
    margin: 5px 2%; }
  .menu .button {
    border: 1px solid black;
    background-color: red;
    border-radius: 25px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    float: right; }
  .menu .other {
    display: none;
    background-color: green;
    margin-top: 10px; }

.displayblock {
  display: block !important; }

JavaScript

$( ".button" ).click(function() {
							// alert('salut');
							// $(".other").toggleClass('displayblock');
                      var parent = $(this).parent(".ele");
                      var other = parent.children(".other");
                      other.toggleClass("displayblock");
                      if(other.hasClass("displayblock")){
                          $(".menu").scrollTop(other.offset().top);
                      }
                      else{
                          $(".menu").scrollTop(parent.offset().top);
                      }
							});