JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent_block">
	<div class="button"></div>
	<div class="toggled_block"></div>
</div>
<a class="button header-icon1 js-show-header-dropdown" data-toggle="dropdown">
    <img src="assets/new/images/icons/icon-header-01.png" class="header-icon1" alt="ICON">&nbsp;{$username}
    </a>
						<div class="toggled_block header-cart1 header-dropdown">
							<ul class="header-cart-wrapitem">
								<li class="header-cart-item1">
									<div class="header-cart-item-txt1 toggled_block">
										<a href="[[~8]]">
											Профиль
										</a>
									</div>
								</li>
	<li class="header-cart-item1">
									<div class="header-cart-item-txt1">
										<a href="[[~9]]">
											История заказов
										</a>
									</div>
								</li>
									<!--<li class="header-cart-item1">
									<div class="header-cart-item-txt1">
										<a href="[[~20]]">
											Баланс
										</a>
									</div>
								</li>-->
									<li class="header-cart-item1">
									<div class="header-cart-item-txt1">
										<a href="{$_modx->resource.id | url : [] : ['action' => 'auth/logout']}">
											Выйти из профиля
										</a>
									</div>
								</li>
							</ul>
						</div>

CSS

.parent_block {
	width: 200px;
	height: 100px;
}

.button {
	width: 200px;
	height: 50px;
	background: #00BB65;
	border-radius: 5px;
	overflow: hidden;
}

.toggled_block {
	width: 200px;
	height: 50px;
	background: #fff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ccc;
	display: none;
}

JavaScript

$(".button").click(function () {
	$('.toggled_block').toggle();
});