JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">

<div class="col-2 collapse show d-md-flex bg-light pt-2 pl-0 min-vh-100" id="sidebar">
<ul class="nav flex-column flex-nowrap overflow-hidden gph-group">
	<li class="slm-panel nav-item">
		<a class="nav-link collapsed"  data-toggle="collapse" data-target="#sub1">
		<span>
		ABC										 
		</span></a>
		<div class="gph-panel collapse" id="sub1" aria-expanded="false">
		<ul class="flex-column pl-2 nav">
				<li class="nav-item">
					<a class="nav-link py-0" href="">
						<span>sub 1</span>
					</a>
				</li>
							<li class="nav-item">
					<a class="nav-link py-0" href="">
						<span>sub 1</span>
					</a>
				</li>
							<li class="nav-item">
					<a class="nav-link py-0" href="">
						<span>sub 1</span>
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link py-0" href="">
						<span>sub 1</span>
					</a>
				</li>
		</ul> 
	</div>
	</li>									
	<li class="slm-panel nav-item">
		<a class="nav-link text-truncate" href="">
			<span>
			DEV												 
			</span>
		</a>
	</li>
	<li class="slm-panel nav-item">
		<a class="nav-link text-truncate" href="">
			<span>
			DEF												 
			</span>
		</a>
	</li>
		<li class="slm-panel nav-item">
		<a class="nav-link text-truncate" href="">
			<span>
			DEF												 
			</span>
		</a>
	</li>
		<li class="slm-panel nav-item">
		<a class="nav-link text-truncate" href="">
			<span>
			DEF												 
			</span>
		</a>
	</li>
		<li class="slm-panel nav-item">
		<a class="nav-link text-truncate" href="">
			<span>
			DEF												 
			</span>
		</a>
	</li>
		<li class="slm-panel nav-item">
		<a class="nav-link text-truncate" href="">
			<span>
			DEF												 
			</span>
		</a>
	</li>
		<li class="slm-panel nav-item">
		<a class="nav-link...

CSS

.nav-link[data-toggle].collapsed:after {
    content: " ▾";
	font-size: 17px;
}
.nav-link[data-toggle]:not(.collapsed):after {
    content: " ▴";
	font-size: 17px;
}

JavaScript

$('.gph-panel').on('show.bs.collapse', function (e) {
		var $panel = $(this).closest('.slm-panel');
		console.log($panel.offset());
		 $('html,body').animate({
                scrollTop: 20 -  $panel.offset().top
          }, 500);
		$('.gph-group .in').collapse('hide');
    });