Нижняя мобильная панелька

Реализация нижней мобильной панели.

HTML

	<div class="mobil-panel-cont">
		<div class="mobil-panel__items">

			<div class="mobil-panel__items-itm">
				<div id="mobmenu_cont_01" class="mobil-panel__items-itm-content">
					<p class="itm-close"><i class="fa-solid fa-xmark"></i></p>
					<p class="itm-title">Заголовок</p>
					<div class="itm-block">
						Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Deleniti praesentium consequatur enim culpa, repudiandae voluptas. Alias velit modi iusto odio ipsam nihil? Beatae vel animi sed, tempora consequatur fuga nostrum? Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Deleniti praesentium consequatur enim culpa, repudiandae voluptas. Alias velit modi iusto odio ipsam nihil? Beatae vel animi sed, tempora consequatur fuga nostrum?
					</div>
				</div>
			</div>

			<div class="mobil-panel__items-itm">
				<div id="mobmenu_cont_02" class="mobil-panel__items-itm-content">
					<p class="itm-close"><i class="fa-solid fa-xmark"></i></p>
					<p class="itm-title">Заголовок</p>
					<div class="itm-block">
						Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Deleniti praesentium consequatur enim culpa, repudiandae voluptas. Alias velit modi iusto odio ipsam nihil? Beatae vel animi sed, tempora consequatur fuga nostrum? Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Deleniti praesentium consequatur enim culpa, repudiandae voluptas. Alias velit modi iusto odio ipsam nihil? Beatae vel animi sed, tempora consequatur fuga nostrum? Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Deleniti praesentium consequatur enim culpa, repudiandae voluptas. Alias velit modi iusto odio ipsam nihil? Beatae vel animi sed, tempora consequatur fuga nostrum?
					</div>
				</div>
			</div>

			<div class="mobil-panel__items-itm">
				<div id="mobmenu_cont_03" class="mobil-panel__items-itm-content">
					<p class="itm-close"><i class="fa-solid fa-xmark"></i></p>
					<p class="itm-title">Заголовок</p>
					<div class="itm-block">
						Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Deleniti praesentium consequatur enim culpa, repudiandae voluptas. Alias velit modi iusto odio ipsam nihil? Beatae vel animi sed, tempora consequatur fuga nostrum?
					</div>
				</div>
			</div>

			<div class="mobil-panel__items-itm">
				<div id="mobmenu_cont_04" class="mobil-panel__items-itm-content">
					<p class="itm-close"><i class="fa-solid fa-xmark"></i></p>
					<p class="itm-title">Заголовок</p>
					<div class="itm-block">
						Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Deleniti praesentium consequatur enim culpa, repudiandae voluptas. Alias velit modi iusto odio ipsam nihil? Beatae vel animi sed, tempora consequatur fuga nostrum? Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Deleniti praesentium consequatur enim culpa, repudiandae voluptas. Alias velit modi iusto odio ipsam nihil? Beatae vel animi sed, tempora consequatur fuga nostrum?
					</div>
				</div>
			</div>

		</div>
	</div>

	<div class="mobil-panel">
		<div class="mobil-panel__items">

			<div class="mobil-panel__items-itm">
				<i id="mobmenu_01" class="fas fa-phone-alt fa-2x text-light"></i>
			</div>

			<div class="mobil-panel__items-itm">
				<i id="mobmenu_02" class="fas fa-map-marker-alt fa-2x text-light"></i>
			</div>

			<div class="mobil-panel__items-itm">
				<i id="mobmenu_03" class="fas fa-pencil-alt fa-2x text-light"></i>
			</div>

			<div class="mobil-panel__items-itm">
				<i id="mobmenu_04" class="fas fa-at fa-2x text-light"></i>
			</div>

		</div>
	</div>

JS

<!--СКРИПТЫ МОБИЛЬНОЙ ПАНЕЛИ-->
<script>
$("p.itm-close").click(function() {
	$("#mobmenu_cont_01").removeClass('mobil-panel-show');
	$("#mobmenu_cont_02").removeClass('mobil-panel-show');
	$("#mobmenu_cont_03").removeClass('mobil-panel-show');
	$("#mobmenu_cont_04").removeClass('mobil-panel-show');
});

$("#mobmenu_01").click(function() {
	$("#mobmenu_cont_01").addClass('mobil-panel-show');
	$("#mobmenu_cont_02").removeClass('mobil-panel-show');
	$("#mobmenu_cont_03").removeClass('mobil-panel-show');
	$("#mobmenu_cont_04").removeClass('mobil-panel-show');
});
$("#mobmenu_02").click(function() {
	$("#mobmenu_cont_01").removeClass('mobil-panel-show');
	$("#mobmenu_cont_02").addClass('mobil-panel-show');
	$("#mobmenu_cont_03").removeClass('mobil-panel-show');
	$("#mobmenu_cont_04").removeClass('mobil-panel-show');
});
$("#mobmenu_03").click(function() {
	$("#mobmenu_cont_01").removeClass('mobil-panel-show');
	$("#mobmenu_cont_02").removeClass('mobil-panel-show');
	$("#mobmenu_cont_03").addClass('mobil-panel-show');
	$("#mobmenu_cont_04").removeClass('mobil-panel-show');
});
$("#mobmenu_04").click(function() {
	$("#mobmenu_cont_01").removeClass('mobil-panel-show');
	$("#mobmenu_cont_02").removeClass('mobil-panel-show');
	$("#mobmenu_cont_03").removeClass('mobil-panel-show');
	$("#mobmenu_cont_04").addClass('mobil-panel-show');
});

jQuery(function($){
	$(document).mouseup(function (e){
		var div = $(".mobil-panel-show");
		if (!div.is(e.target) && div.has(e.target).length === 0) {
			$("#mobmenu_cont_01").removeClass('mobil-panel-show');
			$("#mobmenu_cont_02").removeClass('mobil-panel-show');
			$("#mobmenu_cont_03").removeClass('mobil-panel-show');
			$("#mobmenu_cont_04").removeClass('mobil-panel-show');
		}
	});
});
</script>

CSS

.mobil-panel {
    display: none;}
.mobil-panel-cont {
    display: none;}

@media (max-width: 576px) {
#go-top {
    bottom: 50px;}
#online-order {
    bottom: 60px;}

.mobil-panel {
    display: block;
    background-color: #62339b;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;}
.mobil-panel-cont {
    display: block;
    background-color: #62339b;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 998;}
.mobil-panel__items {
    display: flex;
    justify-content: space-between;}
.mobil-panel__items-itm {
    cursor: pointer;
    width: 25%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;}
.mobil-panel__items-itm-content {
    box-shadow: 0px 1px 8px #0000003d;
    background-color: #ffffff;
    overflow: hidden;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -500px;
    right: 0;
    z-index: 999;
    transition: 0.5s;}
.mobil-panel-show {
    bottom: 52px;
    transition: 0.5s;}
.mobil-panel__items-itm-content p.itm-close {
    margin: 0;
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #62339b;
    cursor: pointer;}
.mobil-panel__items-itm-content p.itm-title {
    width: 100%;
    height: 50px;
    padding: 10px;
    background-color: #f6f6f6;
    border-bottom: 1px solid #d5d5d5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: 'Verdana';
    font-size: 14px;
    line-height: 1;
    color: #707070;}
.itm-block {
    padding: 20px;}}