Изменение классов
 

Здравствуйте! При клике на мгик появляться блок - затем при клике на сведенья появляется другой блок отрабатывает правильно.
Но вот если нажать на МГИК и потом нажать НАЗАД то почему то появляется блок который относиться к Сведеньям
Работает криво
Помогите пожалуйста до конца решить данную проблему

https://codepen.io/levacheb/pen/ByBBZaZ

$(document).ready(function () {
$('.has-submenu').click(function () {
const $this = $(this); // Кэшируем $(this) для повторного использования
const $headerSubmenu = $('.header-submenu');
const $subExpandable = $('.sub-submenu-expandable');
const $hasSubmenu = $('.has-submenu');
const $ttl = $('.ttl');

if ($this.hasClass('mobil_active')) {
// Удаление классов и скрытие блоков
$this.removeClass('mobil_active').siblings().remov eClass('to-left');
$hasSubmenu.not($this).removeClass('to-left');
$headerSubmenu.hide();
$subExpandable.show();

// Добавление классов "to-left" для нужных элементов
$hasSubmenu.slice(1, 10).addClass('to-left');
$('.has-sub-submenu').addClass('mobil_active');
$headerSubmenu.show();
$('li').slice(1, 5).addClass('to-left');
$('.ttl:eq(0)').addClass('to-left');

} else {
// Добавление классов и отображение блоков
$this.addClass('mobil_active').siblings().removeCl ass('to-left');
$hasSubmenu.not($this).addClass('to-left');
$headerSubmenu.show();
$subExpandable.hide();

// Сброс классов
$('li:eq(0)').addClass('mobil_active');
$('.has-sub-submenu').removeClass('mobil_active');
$('li').slice(1, 5).removeClass('to-left');
$('.ttl:eq(0)').removeClass('to-left');

}
});
});

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

*, * :after, * :before {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
width: 621px;
}
@media (max-width: 620px) {
.has-submenu {
display: flex;
flex-direction: column;
margin-left: 20px;
}
.links {
color: black;
text-decoration: none;
}
.header-bottom-links-row > li.has-submenu > .ttl::after {
content: "";
width: 10px;
height: 17px;
background: url(mob-menu-arrow.svg) 0 0 no-repeat;
position: absolute;
right: 20px;
margin-top: -16px;
}
.ttl {
margin-bottom: 10px;
}
.ttl > a {
text-decoration: none;
}
.submenu-list {
list-style-type: none;
}


.mobil_active{
display: block;
}

li.mobil_active > .ttl:after {
background-image: url(mob-menu-back.svg) !important;
left: 0 !important;
right: auto !important;
}
ul.submenu-list > li.has-sub-submenu > .ttl:after {
content: "";
width: 10px;
height: 17px;
background: url(mob-menu-arrow.svg) 0 0 no-repeat;
position: absolute;
right: 20px;
margin-top: 0;
}
.to-left {
display: none;
}

.header-submenu {
display: none;
}
.to-right {
display: none;
}

}

<ul class="header-bottom-links-row">
<li class="has-submenu">
<div class="ttl">
<a href="#" class="border_bottom">О Мгике</a>
<div class="dropdown_arrow"></div>
</div>


<div class="header-submenu">
<div class="header-submenu-cont">
<div class="header-submenu-1">
<ul class="submenu-list">
<li>
<div class="ttl">
<a href="#" class="border_bottom">Приветствие ректора</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">История МГИКа</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Структура МГИКа</a>
</div>
</li>
<li>
<div class="ttl">
<a href="#" class="border_bottom">Ученый совет</a>
</div>
</li>
<li class="has-sub-submenu">
<div class="ttl">
<div class="submenu-arrow"></div>
<a href="#" class="border_bottom">Сведенья об образовательной организации</a>
</div>
<div class="sub-submenu-expandable">
<ul class="sub-submenu">
<li class="">
<a href="">
Основные сведения
</a>
</li>
<li class="">
<a href="">
Структура и органы управления образовательной организацией
</a>
</li>
<li class="">
<a href="">
Документы
</a>
</li>
<li class="">
<a href="">
Образование
</a>
</li>
<li class="">
<a href="">
Образовательные стандарты и требования
</a>
</li>

<li class="">
<a href="">
Руководство
</a>
</li>
<li class="">
<a href="">
Педагогический состав
</a>
</li>
<li class="">
<a href="">
Материально-техническое обеспечение и оснащенность
образовательного процесса. Доступная среда
</a>
</li>
<li class="">
<a href="">
Стипендии и меры поддержки обучающихся
</a>
</li>
<li class="">
<a href="">
Платные образовательные услуги
</a>
</li>
<li class="">
<a href="">
Финансово-хозяйственная деятельность
</a>
</li>
<li class="">
<a href="">
Вакантные места для приема (перевода) обучающихся
</a>
</li>
<li class="">
<a href="">
Международное сотрудничество
</a>
</li>
<li class="">
<a href="">
Организация питания в образовательной организации
</a>
</li>

</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>

Lev123,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Lev123,
как вариант, заменить весь ваш код на этот.

$(function() {
            $('.ttl').next().hide();
            $('.ttl').click(function() {
                $(this).next().toggle();
                $(this).parent('li').siblings().toggle();
            })
        });