JSFiddle - React, Tailwind, and code Playground

by webphp

HTML

<div class="content">
    <button id="btn-content" data-item="1">Кнопка</button>
</div>
<div class="btn-content hide" data-item="1">Контент</div>

CSS

.content {
    width: 100%;
    text-align: center;
}
.hide {
    display: none;
}
.btn-content {
    width: 200px;
    height: 50px;
    background: orange;
    border: 1px solid #000;
}

JavaScript

$(function(){
	/* Раскрытие / скрытие контента с позиционирование блока
		#btn-content - кнопка
		.btn-content - окно
	------------------------------------------------------------------------------------------------------------------*/
	
	$(document).on('click', '.btn-content:visible, #btn-content', function(e){
		e.stopPropagation ? e.stopPropagation() : (e.cancelBubble=true);
	});
	
	$(document).on("click", function(){
		var x = $('.btn-content'),
			data = x.data();
		
		if(x.is(':visible') && data.opening === true) {
			// Закрываем окно
			x
				.animate({
					"opacity": 0
				}, 100, function(){
					$(this)
						.removeAttr('style')
						.data('opening', false);
				});
		}
	});


	// data.item - идентификация блока и кнопки

	$(document).on('click', '#btn-content', function(e) {
		e.preventDefault();
		var sbmt = $(this), 											// кнопка
			data = sbmt.data(), 										// данные с кнопки
			x = $('.btn-content[data-item="' + data.item + '"]'), 	// скрытый блок
			xData = x.data(),											// данные скрытого блока
			sbmtPosition = sbmt.offset(), 								// координаты кнопки sbmtPosition.top and sbmtPosition.left
			moving = $('body'),											// Перемещение блока x, позволит избежать проблемы с position: relative И прочим
			sbmtSize = {
				"h": sbmt.height(),
				"w": sbmt.width()
			}
	
		// Настройки блока
		data.speed = data.speed ? data.speed : 100;
	
		// Название блока
		if(data.title) {
			x
				.find('.name-p')
				.remove();
			x
				.prepend('<div class="name-p">' + data.title + '</div>');
		}
	
		// Скрываем блок если он открыт
		if(x.is(':visible')) {
			return x
				.animate({
					"opacity": 0
				}, data.speed, function(){
					$(this)
						.removeAttr('style')
						.data('opening', false);
				});
		}
		
		$('body').prepend(x);
	
		if( ! data.item) {
			console.log('Неопределен идентификатор кнопки (data.item)');
			return false;
		}
	
		if( ! xData) {
			console.log('Блок не найден или неопределен идентификатор...