JSFiddle - React, Tailwind, and code Playground

by webphp

HTML

<button id="type">Нажать</button>
<div class="load-header" style="display: none; background: #F2F2F2">
    <div id="load-header-content" style="display: none">Контент</div>
</div>

JavaScript

var flag = 0
		, loadPanel = $('.load-header')
		, content = $('#load-header-content')
		, animParams = {
			0: {
				opacity: "show",
				padding: 30
			},
			1: {
				opacity: "hide",
				padding: 0
			}
		}
		, animParamsHeader = {
			0: {
				opacity: "show",
				minHeight: 400
			},
			1: {
				opacity: "hide",
				minHeight: 0
			}
		};

	$(document).on("click", function(e){
		if ($(e.target).is('.load-header')) {
			flag = 1;
		}
	});
	
	$('#type').on('click', function() {
		loadPanel.finish().animate(animParamsHeader[flag], 100, 'linear', function() {
			content.finish().animate(animParams[flag], 100, 'linear', function() {
				// доп. паррам.
			});
			flag = flag ? 0 : 1;
		});
		return false;
	});