JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<div id="dropdown-menus">
<div id="section1-drop" class="drop-section hidden-panel">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

<div id="section2-drop" class="drop-section hidden-panel">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

<div id="section3-drop" class="drop-section hidden-panel">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

<div id="section4-drop" class="drop-section hidden-panel">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

<div id="section5-drop" class="drop-section hidden-panel">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>
</div>

<ul id="dropdown-links" class="menu main-tabs">
<li><a class="panel-btn" href="javascript:dropMenu('section1');" id="drop-link-section1">section 1</a></li>
<li><a class="panel-btn" href="javascript:dropMenu('section2');" id="drop-link-section2">section 2</a></li>
<li><a class="panel-btn" href="javascript:dropMenu('section3');" id="drop-link-section3">section 3</a></li>
<li><a class="panel-btn" href="javascript:dropMenu('section4');" id="drop-link-section4">section 4</a></li>
<li><a class="panel-btn" href="javascript:dropMenu('section5');" id="drop-link-section5">section 5</a></li>
</ul>

CSS

.hidden-panel {display:none;}

JavaScript

function dropMenu(menusection) {
	if ( !($('#dropdown-menus #' + menusection + '-drop').is(':hidden')) ) {
		// Select panel is open. Closes the panel.
		$('#dropdown-menus #' + menusection + '-drop').slideUp(500);
		$('#dropdown-menus #' + menusection + '-drop').removeClass('active');
		$('a#drop-link-' + menusection).removeClass('active');
		// Scroll to top of buttons.
		var aid = $("#dropdown-links");
		$('html,body').animate({scrollTop: aid.offset().top-480},400,function(){});
	} else if ( $('#dropdown-menus .drop-section').hasClass('active') && $('#dropdown-menus #' + menusection + '-drop').is(':hidden') ) {
		// Another panel is open. Closes currently open panel and opens selected panel.
		$('.menu a.active').removeClass('active');
		$('#dropdown-menus .active').slideUp(500,function(){
			$('#dropdown-menus #' + menusection + '-drop').slideDown(500);
			$('#dropdown-menus #' + menusection + '-drop').addClass('active');
			$('a#drop-link-' + menusection).addClass('active');
		}).removeClass('active');
		// Scroll to top of panel.
		var aid = $("#dropdown-menus");
		$('html,body').animate({scrollTop: aid.offset().top-155},400,function(){});
		
	} else {
		// No panel currently open. Opens selected panel.
		$('#dropdown-menus #' + menusection + '-drop').slideDown(500);
		$('#dropdown-menus #' + menusection + '-drop').addClass('active');
		$('a#drop-link-' + menusection).addClass('active');
		// Scroll to top of panel.
		var aid = $("#dropdown-menus");
		$('html,body').animate({scrollTop: aid.offset().top-155},400,function(){});
	}
}