JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
        		
        		<div class="wrap">

	        		<div class="show_block">
	        			<ul>
	        				<li>нужно показать </li>
	        				<li>нужно показать </li>
	        				<li>нужно показать </li>
	        				<li>нужно показать </li>
	        			</ul>
	        		</div>

	        		<div class="hide_block">
	        			<ul>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        			</ul>
	        			<ul>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        			</ul>
	        			<ul>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        			</ul>
	        			<ul>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        				<li>нужно скрыть</li>
	        			</ul>
	        		</div>

	        		<div class="btn">
	        			<a href="#">
	        				<img src="http://s018.radikal.ru/i507/1406/26/96e0e67960f0.png" alt="triangle.png">
	        			</a>
	        		</div>       			
        			
        		</div>


        </div>

CSS

* {
	padding: 0;
	margin: 0;
}

body {
	background-color: green;
}

.main {
	width: 950px;
	height: 600px;
	padding-top: 50px;
	background-color: pink;
	margin: 15px auto;
}

.wrap {
	width: 650px;
	min-height: 550px;	
	margin:  0 auto;
	background-color: #888888;

}

.show_block {
	width: 650px;
	height: 100px;
	margin: 0 auto;
	background-color: red;
}

.show_block ul {
	list-style: none;
	padding-top: 10px;
}

.show_block li {
	width: 145px;
	height: 80px;
	float: left;
	margin-left: 15px;
	background-color: #72FF00;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height: 75px;
	color:blue;
}

.show_block li:first-child {
	margin-left: 12px;
}


.hide_block {
	width: 650px;
	
	margin: 0 auto;
	background-color: #FFE900;
}

.hide_block ul {
	width: 650px;
	min-height: 90px;
	list-style: none;
}

.hide_block li {
	width: 145px;
	height: 80px;
	float: left;
	margin-left: 15px;
	margin-top: 10px;
	background-color: #FF00E1;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height: 75px;
	color:#fff;
}

.hide_block ul:last-child {
	padding-bottom: 10px;
}


.btn {
	width: 100%;
	height: 80px;
	padding-top: 15px;
	background-color: #50A6FC;
}

.btn a {
	display: block;
	margin: 0 auto;
	width: 150px;
	height: 60px;
	background-color: #fff;
	border-radius: 3px;
}

.btn img{
	 margin-left: 7px;
	 margin-top: 4px;
}

JavaScript

$(".btn").click(function(){
		$(".hide_block").stop(true,true).slideToggle(1500);
		$(this).toggleClass("up down"); return false;
	});