JSFiddle - React, Tailwind, and code Playground

by Dmitriy Amangaliev

HTML

<!-- подключючается на странице -->
<script type="text/javascript">
	var opened_sections = [<?
	$arResult["opened"] = $_COOKIE[$arResult["COOKIE_PREFIX"]."_user_profile_open"];
	$arResult["opened"] = preg_replace("/[^a-z0-9_,]/i", "", $arResult["opened"]);
	if (strlen($arResult["opened"]) > 0)
	{
		echo "'".implode("', '", explode(",", $arResult["opened"]))."'";
	}
	else
	{
		$arResult["opened"] = "";
		echo "''";
	}
	?>];
	var cookie_prefix = '<?=$arResult["COOKIE_PREFIX"]?>';
</script>
	<div class="profile-block-top">
		<a title="Личный кабинет" class="profile_link" href="javascript:void(0)" onclick="SectionClick('reg')">Личный кабинет</a>
  </div>
  <div id="user_div_reg"class="profile-block-<?=strpos($arResult["opened"], "reg") === false ? "hidden" : "shown"?>">
		<div class="header_profile">
			<a class="profile_link" href="javascript:void(0)" onclick="SectionClick('reg')">Личный кабинет</a>
		</div>
		<div class="profile_section">
			  <input placeholder="Имя"/>
			</div>
		</div>
	</div>

CSS

.header_profile_top{
	margin: 40px auto 0px auto;
	padding: 17px 0;
	font-family: 'Esqadero-FF-CY-4F-Regular';
	font-size: 16px;
	color: #081f34;
	text-align: center;
	text-transform: uppercase;
	background-color: #35a7e5;
}
.profile-block-top{
	display: inline-block;
	background-color: #e6e6e6;
	padding: 40px;
}
.profile-block-top>a{
	margin-top: 20px;
	display: inline-block;
	width: 460px;
	padding: 17px 0;
	background-color: #062538;
	color: #35a7e5;
	font-family: 'Esqadero-FF-CY-4F-Regular';
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
	vertical-align:middle;
	text-align: center;
}
.header_profile{
	margin: 10px auto 0px auto;
	padding: 17px 0;
	font-family: 'Esqadero-FF-CY-4F-Regular';
	font-size: 16px;
	color: #081f34;
	text-align: center;
	text-transform: uppercase;
	background-color: #35a7e5;
}
.profile-block-hidden
{
	display: none;
}
.profile-block-shown
{
	display: block;
}
.profile_link{
	display: block;
	width: 100%;
	color: #081f34;
}

.profile_description{
	display: inline-block;
	vertical-align:middle;
	margin-left: 20px;
	font-family: 'ProximaNova-Reg';
  	font-size: 16px;
  	color: #062538;
}
.profile-block-shown>a:first-child{margin-top: 0px;}
.profile_section{position:relative;padding: 40px;background-color: #e6e6e6;}
.profile_section >input{
	height: 55px;
	width: 460px;
	margin: 0px 0px 20px 235px;
	padding-left: 20px;
	font-family: 'ProximaNova-Reg';
  	font-size: 16px;
  	border: 0px solid #ddd;
	background-color: #062538;
	color: #f4f4f4;
	-webkit-transition: all linear 0.2s;
  	transition: all linear 0.2s;
  	-webkit-appearance: none;
}
.profile_section_right>input{
	height: 55px;
	width: 460px;
	margin: 0px 0px 20px 235px;
	padding-left: 20px;
	font-family: 'ProximaNova-Reg';
  	font-size: 16px;
  	border: 0px solid #ddd;
	background-color: #062538;
	color: #f4f4f4;
	-webkit-transition: all linear 0.2s;
  	transition: all linear 0.2s;
  	-webkit-appearance: none;
}
.profile_btn{
	float: right; 
}
.profile_btn...

JavaScript 1.7

// в отдельном файле
function removeElement(arr, sElement)
{
	var tmp = new Array();
	for (var i = 0; i<arr.length; i++) if (arr[i] != sElement) tmp[tmp.length] = arr[i];
	arr=null;
	arr=new Array();
	for (var i = 0; i<tmp.length; i++) arr[i] = tmp[i];
	tmp = null;
	return arr;
}

function SectionClick(id)
{
	var div = document.getElementById('user_div_'+id);
	if (div.className == "profile-block-hidden")
	{
		opened_sections[opened_sections.length]=id;	
	}
	else
	{
		opened_sections = removeElement(opened_sections, id);
	}
	div.className = div.className == 'profile-block-hidden' ? 'profile-block-shown' : 'profile-block-hidden';
}