JSFiddle - React, Tailwind, and code Playground

HTML

<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>


<div align="left">
<form  method="post" name="form" action="">
<table cellpadding="0" cellspacing="0" width="500px">

<tr><td align="left"><div align="left"><h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="comment_box">
<textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br />
<input type="text" name="name" id="name"><br />
<input type="submit"  value="Update"  id="v" name="submit" class="comment_button"/>
</td>

</tr>

</table>
</form>

</div>
<div style="height:7px"></div>
<div id="flash" align="left"  ></div>


<?php
echo '
	<div id="wrapper_ac" class="timeline">
		<div class="accordionButton">Button 1 Content</div>
		<div class="accordionContent" style="display: block;">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
		<div class="accordionButton">Button 2 Content</div>
		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
		<div class="accordionButton">Button 3 Content</div>
		<div class="accordionContent">Content 1<br />Short Example</div>
		<div class="accordionButton">Button 4 Content</div>
		<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
		<div class="accordionButton">Button 1 Content</div>
		<div class="accordionContent" style="display: block;">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
	</div>
	';
?>
</div>

</td>
</tr>
</table></div>

CSS

.comment_box {
	background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
* {
	margin:0;
	padding:0;
}		
ol.timeline {
	list-style:none;
	font-size:1.2em;
}
ol.timeline li {
 	display:none;
	position:relative;
	padding:.7em 0 .6em 0;
	border-bottom:1px dashed #000;
	line-height:1.1em;
	background-color:#D3E7F5;
	height:55px;
	width:499px;
}
ol.timeline li:first-child{
	border-top:1px dashed #000;
}
.delete_button	{
	float:right; 
	margin-right:10px;
 	width:20px; 
	height:20px
}
.feed_link	{
	font-style:inherit; 
	font-family:Georgia; 
	font-size:13px;padding:10px; 
	float:left; width:350px;
}
.feed_a {
	color:#0000CC; 
	text-decoration:underline;
}
.delete_update	{
	font-weight:bold;	
}

/***********************************************************************************************************************
 accordion
************************************************************************************************************************/

#wrapper_ac {
	margin: -10px;
	overflow:hidden;
}
div.accordionButton:first-child {
	color:#fd3;
	border-radius: 4px 4px 0 0;
	border-bottom: 1px solid #ccc;
	
}
#wrapper_ac div:nth-last-child(2) {
	color:#fd3;
	border-radius:0 0 4px 4px;
	border-bottom:0px;
}
.accordionButton {	
	width: 100%;
	/*float: left;*/'
	_float: none;  /* Float works in all browsers but IE6 */
	background: #F9F9F9;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	/* border-radius: 4px 4px 0 0; */
	/*border-bottom: 1px solid #ccc;*/
	/*border: 1px solid #ccc;*/
	border-bottom: 1px solid #ccc;
	padding: 6px;
}


div.accordionContent:first-child {
	color:#fd3;	
}
#wrapper_ac div:nth-last-child(1) {
	color:#fd3;
	border-bottom: 0px;
	border-top: 1px solid #ccc;
}
.accordionContent {	
	width: 100%;
	/*float: left;*/
	_float: none; /* Float works in all browsers but IE6 */
	background: #fff;
	/*border-left: 1px solid #ccc;*/
	/*border-right: 1px solid #ccc;*/
	margin: auto;
	border-bottom: 1px solid...

JavaScript

$(document).ready(function() {
	 
	//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
	$('.accordionButton').on('click', function() {

		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$('.accordionButton').removeClass('on');
		  
		//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
	 	$('.accordionContent').slideUp('normal');
	
		  var self = this;
	      setTimeout(function() {
		 	 theOffset = $(self).offset();
		     $('body,html').animate({ scrollTop: theOffset.top - 80 });
		  }, 250);
   
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			  
			//OPEN THE SLIDE
			$(this).next().slideDown('normal');
		 } 
	
		

	 });
	  
	
	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
	$('.accordionButton').mouseover(function() {
		$(this).addClass('over');
		
	//ON MOUSEOUT REMOVE THE OVER CLASS
	}).mouseout(function() {
		$(this).removeClass('over');										
	});
	
	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
	
	
	/********************************************************************************************************************
	CLOSES ALL S ON PAGE LOAD
	********************************************************************************************************************/	
	$('.accordionContent').hide();

});


	$(function() {
		$(".comment_button").click(function() 
		{
		var element = $(this);
   		var boxval = $("#content").val();
		var bval = $("#name").val();
		var dataString = {content:boxval,name:bval};
	
		if(boxval=='')
		{
		alert("Please Enter Some Text");
		} else {
		$("#flash").show();
		$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');
		
		$.ajax({
			type: "POST",
  			url: "<?php echo $total_path.'/update_data.php'; ?>",
   			data: dataString,
  			cache: false,
  			success: function(html){

 ...