JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<div class="acardeon" dir="rtl">
		<div class="f">
			<h3>بخش اول</h3>
			<div class="part">
				<table style="width: 100%" cellpadding="10" cellspacing="0">
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
					<tr>
						<td>[input-radio 2532]</td>
					<td><label>نام یک محصول </label></td>
					</tr>
				</table>
				<div class="clear">&nbsp;</div>
			</div>
				<div class="clear">&nbsp;</div>
		</div>
		<div class="f">
			<h3>بخش دوم</h3>
			<div class="part">
				<table style="width: 100%" cellpadding="10" cellspacing="0">
					<tr>
					<td><label>نام یک محصول </label></td>
					<td>[input-text 23521" type="checkbox" ]</td>
					</tr>
					<tr>
					<td><label>نام یک محصول </label></td>
					<td>[input-text 23522" type="checkbox" ]</td>
					</tr>
					<tr>
					<td><label>نام یک محصول </label></td>
					<td>[input-text 23523" type="checkbox" ]</td>
					</tr>
					<tr>
					<td><label>نام یک محصول </label></td>
					<td>[input-text 23524" type="checkbox" ]</td>
					</tr>
					<tr>
					<td><label>نام یک محصول </label></td>
					<td>[input-text 23525" type="checkbox" ]</td>
					</tr>
					<tr>
					<td><label>نام یک محصول...

CSS

.acardeon {
	display:block;
	margin:25px 8%;
	padding:5px 2% 10px;
	width:80%;
	background:#D3D3D3;
}
.f {
	background:#0099CC;
	padding:0;
	margin:0;
}
h3 {
	border:2px #aaa solid;
	border-bottom-color:#002233;
	background:#3366CC;
	margin:10px 0 0 0;
	padding:10px;
	color:#002233;
	text-align:center;
    background:#3366CC;
    background-image: -webkit-gradient(linear, top right, bottom left, from(#3366CC), to(#224488));
    background-image: -webkit-linear-gradient(top, #3366CC, #224488);
    background-image:    -moz-linear-gradient(top, #3366CC, #224488);
    background-image:      -o-linear-gradient(top, #3366CC, #224488);
    background-image: linear-gradient(to bottom, #3366CC, #224488);
	box-shadow:         inset 0px 3px 7px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:	inset 0px 3px 7px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 		inset 0px 3px 7px rgba(0, 0, 0, 0.2);
	-khtml-box-shadow: 	inset 0px 3px 7px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0px 3px 7px rgba(0, 0, 0, 0.2);
	cursor:pointer; 
}
h3:hover,h3.active {
	color:#FFFFFF;
	text-shadow: 1px 1px 0px #002233;
}
.part {
	margin:10px;
	padding:10px;
	background:#fff;
	height:auto;
	-khtml-border-radius:6px;-moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px; 
}
table {
	margin:10px;
}
table tr {
	height:27px;
}
table td {
	border-right:1px #002233 solid; 
	border-bottom:1px #002233 dotted; 
}
.clear {
	clear:both;
	display:block;
	font-size:1px;
	line-height:1px;
	height:1px;
	overflow:hidden;
}

JavaScript

$(document).ready(function() {
	$(".acardeon .f .part,.acardeon .f .part table td").hide();
	$(".acardeon .f:nth-child(1) .part,.acardeon .f:nth-child(1) .part table td").show();
	$(".acardeon .f:nth-child(1) h3").addClass("active");
	$(".acardeon .f>h3").click(function() {
		var $this = $(this).parent(".f").find(".part");
		if($this.is(":hidden"))
		{
		$(".part").slideUp("slow");
		$(".part").find("table td").fadeOut();
		$this.slideDown("slow");
		$this.find("table td").delay(1000).fadeIn("slow");
		$("h3").removeClass("active");
		$(this).addClass("active");
		}
	});
});