JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="snapbutton-area" name="">
			<li class="snapbutton" id="snapbutton1">
				<ul>
					<li class="snapbutton-top" id="snapbutton-top1">
						Top (click me!)						
					</li>
					<li class="snapbutton-contentarea" id="snapbutton-contentarea1">
						Content<br></br>
						Blubb Bla
						<ul>
							<li>a</li>
							<li>b</li>
							<li>c</li>
						</ul>
					</li>
					<li class="snapbutton-footer" id="snapbutton-footer1">
						Footer					
					</li>
				</ul>
			</li>
			<li class="step">
				Distance					
			</li>
			<li class="snapbutton" id="snapbutton2">
				<ul>
					<li class="snapbutton-top" id="snapbutton-top2">
						Top (click me!)<br></br>
						2
					</li>
					<li class="snapbutton-contentarea" id="snapbutton-contentarea2">
						Content 2<br></br>
						Small

					</li>
					<li class="snapbutton-footer" id="snapbutton-footer2">
						Footer					
					</li>
				</ul>
			</li>
		</ul>

CSS

HTML {
	height: 100%;
	margin: 0;
	padding: 0;	
}
BODY {
	position: relative;
	min-height: 100%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	
	font-size: 14px;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF; 		
}
UL, LI {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
UL.snapbutton-area {
	width: 300px;
	background-color: #EFEFEF; 
	position: relative;
}
LI.snapbutton {
	background-color: #AAAAAA; 
	position: relative;	
}
LI.step {
	background-color: #AADDDD; 
	height: 30px;
	position: relative;		
}
.snapbutton-top {
	background-color: #EFEFEF; 
	position: relative;	
}
.snapbutton-footer {
	background-color: #000000; 
	color: #EFEFEF;
	position: relative;	
}
.snapbutton-contentarea {
	background-color: #FFFFCC; 
	position: relative;
	overflow: hidden;
	display: none; 
	margin-left: 5px;
	margin-right: 5px;
}

JavaScript

var TestFW = (function () {

	var myDomHandler;

	// ------------------------------------------
	function init() {	
		
		createFWObjects();
		registerHandler();
		
		function createFWObjects() {
			myDomHandler = new DomHandling();			
		}

		function registerHandler() {			
			
			var snapButtonsArray = myDomHandler.getElementsByClassName(document, 'snapbutton');		
			for (var i= 0; i < snapButtonsArray.length; i++) {
				var snapButtonsLoop = snapButtonsArray[i];	
				var snapButtonHandler = new snapButtons();	
				if (document.addEventListener) {				
					snapButtonsLoop.addEventListener("click", snapButtonHandler.startOpenShut,  false);								
				} else {					
					snapButtonsLoop.onclick = snapButtonHandler.startOpenShut;										
				}					
			}	
			
		}
	
	}
	
	function snapButtons() {
	
		var mySelf = this;
		var snapButtonOpenCloseIsInProgress = false;
		var snapButtonIsOpen = false;
		
		this.startOpenShut = function() {
			var snapButton = this;		
			var snapbuttonContentarea = myDomHandler.getElementsByClassName(snapButton, "snapbutton-contentarea")[0];
			if (snapButtonOpenCloseIsInProgress == false &&  snapButtonIsOpen == false) {						
				snapbuttonContentarea.style.display = "block";						
				var targetHeight = snapbuttonContentarea.offsetHeight; 					
				snapbuttonContentarea.style.height = "1px";
				mySelf.flipOpen(snapbuttonContentarea, targetHeight, 1, 1);		
			}	else if (snapButtonOpenCloseIsInProgress == false &&  snapButtonIsOpen == true) {						
				mySelf.snapShut(snapbuttonContentarea, 1, 1);		
			}
		}			
	
		this.flipOpen = function(targetElement, targetHeight,pixelWidth) {				
			var targetElementOffsetHeight = targetElement.offsetHeight;						
			if (targetElementOffsetHeight < targetHeight) {				
				targetElement.style.height = (targetElementOffsetHeight+pixelWidth)+"px";	
				snapButtonOpenCloseIsInProgress = true;
				setTimeout( function() { mySelf.flipOpen(targetElement, targetHeight, pixelWidth) }, 1);				
			} else...